I have got a table with checkboxes. This is sort of permission table. I wanted to get the ID of the row with unchecked checkbox.
Scenario: If I uncheck field3 from Permission1 and hit save button I wanted to get the Id of permission1 row and change the name attribute to false of unchecked checkbox. I believe I can change the name attribute But I'm getting all the row ids in my console.log.
This is what I tried:
$("#savePermissionTable").click(function() {
$("#permissionTable tr").each(function() {
if($(this).find('input[type="checkbox"]
[name="true"]:not(:checked)')){
console.log($(this).attr('id'));
}
})
})
HTML:
<table class="table">
<thead>
<tr>
<th> </th>
<th data-sortable="true">field 1</th>
<th data-sortable="true">field 2</th>
<th data-sortable="true">field 3</th>
</tr>
</thead>
<tbody id="permissionTable">
<tr id="1">
<td>Permission 1</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
</tr>
<tr id="2">
<td>Permission 2</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
</tr>
</tbody>
</table>
I tried to search different example but nothing helped much with the unchecked checkbox.Any help what I'm doing wrong will be appreciated.
My Code: Fiddle
A selector, when passed into an if will always return true. So, instead, use $(".selector").length. Additionally, I added the name attribute update.
$("#savePermissionTable").click(function() {
$("#permissionTable tr").each(function() {
var unchecked = $(this).find('input[type="checkbox"][name="true"]:not(:checked)');
if (unchecked.length) {
console.log($(this).attr('id'));
unchecked.attr("name",false);
}
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<!--script src="https://raw.githubusercontent.com/719media/bootstrap-table/bootstrap4/src/bootstrap-table.js"></script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
<table class="table">
<thead>
<tr>
<th> </th>
<th data-sortable="true">field 1</th>
<th data-sortable="true">field 2</th>
<th data-sortable="true">field 3</th>
</tr>
</thead>
<tbody id="permissionTable">
<tr id="1">
<td>Permission 1</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
</tr>
<tr id="2">
<td>Permission 2</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
</tr>
</tbody>
</table>
<div class="text-right">
<button type="button" class="btn btn-primary" id="savePermissionTable"> Save </button>
</div>
An alternative way would be this one.
$("#savePermissionTable").click(function() {
$("input[name='true']:not(:checked)").each(function() {
var el = $(this).parents('tr')[0];
$(this).prop("name",false);
console.log($(el).prop('id'));
})
});
You can check it in this Fiddle
Related
I know there're several question like mine posted over here. But mine is a little different.
I want to enable the button when at least one checkbox or all is checked. And disable it when none is checked.
The problem is, I can enable the button when all or one is checked. But when I uncheck it. The button is not disabled as I unchecked.
My concept is when there's no checkbox is checked. The button is disabled.
$(function() {
$('#checkall').change(function() {
$('.inv').prop('checked', this.checked);
$('button[type="submit"]').removeAttr('disabled');
});
$('.inv').change(function() {
if ($('.inv:checked').length == $('.inv').length) {
$('#checkall').prop('checked', true);
$('button[type="submit"]').removeAttr('disabled');
} else {
$('#checkall').prop('checked', false);
$('button[type="submit"]').attr('disabled', 'disabled');
}
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered">
<tr>
<th><label><input type="checkbox" class="form-check-input" id="checkall" value="b" /> All</label></th>
<th>Product</th>
<th>Cost</th>
</tr>
<tr>
<td><input type="checkbox" class="form-check-input inv" name="bill" value="b1" /> 1</td>
<td>Unit 1</td>
<td>$10</td>
</tr>
<tr>
<td><input type="checkbox" class="form-check-input inv" name="bill" value="b2" /> 2</td>
<td>Unit 1</td>
<td>$8</td>
</tr>
<tr>
<td><input type="checkbox" class="form-check-input inv" name="bill" value="b3" /> 3</td>
<td>Unit 1</td>
<td>$20</td>
</tr>
</table>
<button type="submit" class="btn btn-primary btn-lg float-end" disabled>Submit</button>
Or you can play here https://jsfiddle.net/cLk8axm0/
So select all the checkboxes that are checked and look at the length
const cbs = $(".inv");
const checkAllCb = $("#checkall");
checkAllCb.on("change", function () {
cbs.prop("checked", this.checked).eq(0).trigger('change');
});
cbs.on("change", function () {
const checkedCount = $('.inv:checked').length;
$('button[type="submit"]').prop("disabled", checkedCount === 0);
checkAllCb.prop("checked", cbs.length === checkedCount);
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered">
<tr>
<th><label><input type="checkbox" class="form-check-input" id="checkall" value="b" /> All</label></th>
<th>Product</th>
<th>Cost</th>
</tr>
<tr>
<td><input type="checkbox" class="form-check-input inv" name="bill" value="b1" /> 1</td>
<td>Unit 1</td>
<td>$10</td>
</tr>
<tr>
<td><input type="checkbox" class="form-check-input inv" name="bill" value="b2" /> 2</td>
<td>Unit 1</td>
<td>$8</td>
</tr>
<tr>
<td><input type="checkbox" class="form-check-input inv" name="bill" value="b3" /> 3</td>
<td>Unit 1</td>
<td>$20</td>
</tr>
</table>
<button type="submit" class="btn btn-primary btn-lg float-end" disabled>Submit</button>
I am trying to show and hide tr of table with checkbox check and uncheck. I tried the following script not working for me.
$('.checks').on('ifChecked', function(event) {
var checked = $(this).val();
if (checked == 1) {
$('.vegetables').show();
}
if (checked == 2) {
$('.fruits').show();
}
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="1">vegetables
</label>
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="2">Fruits
</label>
</div>
<table>
<tbody>
<tr class="vegetables hidden">
<td colspan="2">
<h2>Vegetablese:</h2>
</td>
</tr>
<tr class="vegetables hidden">
<td>
<label>Vegetables:</label>
<input type="text">
</td>
</tr>
<tr class="fruits hidden">
<td colspan="2">
<h2>Fruits:</h2>
</td>
</tr>
<tr class="fruits hidden">
<td>
<label>Fuits:</label>
<input type="text">
</td>
</tr>
</tbody>
</table>
Here's what you need to do:
Change ifChecked with onchange. There's no event like ifChecked.
Use toggle based on the state of the checkbox.
Check for $(this).checked to find the state. This will return true or false.
$('.checks').on('change', function(event) {
var checked = $(this).val();
if (checked == 1) {
$('.vegetables').toggle($(this).checked);
}
if (checked == 2) {
$('.fruits').toggle($(this).checked);
}
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="1" /> vegetables
</label>
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="2" /> Fruits
</label>
</div>
<table>
<tbody>
<tr class="vegetables hidden">
<td colspan="2">
<h2>Vegetablese:</h2>
</td>
</tr>
<tr class="vegetables hidden">
<td>
<label>Vegetables:</label>
<input type="text">
</td>
</tr>
<tr class="fruits hidden">
<td colspan="2">
<h2>Fruits:</h2>
</td>
</tr>
<tr class="fruits hidden">
<td>
<label>Fuits:</label>
<input type="text">
</td>
</tr>
</tbody>
</table>
Theres a couple of issues in your logic. Firstly ifChecked is not a valid event. Use change instead. Secondly the logic doesn't work to hide elements. To do that you'd need to loop through all checkboxes and determine their state in order to show/hide the content underneath.
The simplest and most extensible way to achieve what you require is to use a data attribute to specify which element should be toggled when the checkbox is updated. Then you can simply hide/show each element in the set. Try this:
let $checks = $('.checks').on('change', () => $checks.each((i, el) => $(el.dataset.target).toggle(el.checked)));
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="1" data-target=".vegetables">vegetables
</label>
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="2" data-target=".fruits">Fruits
</label>
</div>
<table>
<tbody>
<tr class="vegetables hidden">
<td colspan="2">
<h2>Vegetablese:</h2>
</td>
</tr>
<tr class="vegetables hidden">
<td>
<label>Vegetables:</label>
<input type="text">
</td>
</tr>
<tr class="fruits hidden">
<td colspan="2">
<h2>Fruits:</h2>
</td>
</tr>
<tr class="fruits hidden">
<td>
<label>Fuits:</label>
<input type="text">
</td>
</tr>
</tbody>
</table>
VIEW PAGE
<table>
<thead>
<tr>
<th><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th>
<th>#</th>
<th>Beneficiary Name</th>
<th>Stipendiary Type</th>
<th class="text-right box">Bonus ₹</th>
<th class="text-right">Stipendiary ₹</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="1" /><input type="hidden" name="amount[]" value="500" tabindex ="-1" />
</td>
<td>1</td>
<td>Jeinbai Nesamony</td>
<td>Poor Pension</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">500.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="2" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>2</td>
<td>Chellammal Kochimoni</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="3" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>3</td>
<td>Thasammal Thangaiah</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="4" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>4</td>
<td>Roselet</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="5" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>5</td>
<td>Kamalam Chellam R.</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
</tbody>
MY REQUIREMENT
I want to save bellowed data's to table
1. bene_id
2. Bonus ₹
3. Stipendiary ₹
I've fetch this table data form existing Beneficiary Table. So Bene_id and Stipendiary ₹ value get from that tabel. Bonus ₹ will be an input.
Now i want to save table data to the payment table.
I'm trying to post the value by array. it's working fine.
now i've an issue with the check box. i want to neglect the row value that unchecked. That means i want row value which was checkbox : checked
i'm expecting jquery for passing checkbox : checked row value to hidden input array.
As i told you in the comments section, you can use normal HTML forms to submit to the action method on your controller, but you need to modify your form a little bit, this is the easiest solution.
Despite of option one simplicity i decided to give you another approach to solve this problem, so first look at the code of HTML and JavaScript:
<table>
<thead>
<tr>
<th><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th>
<th>#</th>
<th>Beneficiary Name</th>
<th>Stipendiary Type</th>
<th class="text-right box">Bonus ₹</th>
<th class="text-right">Stipendiary ₹</th>
</tr>
</thead>
<tbody id="details">
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="1" />
</td>
<td>1</td>
<td>Jeinbai Nesamony</td>
<td>Poor Pension</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount">500.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="2" />
</td>
<td>2</td>
<td>Chellammal Kochimoni</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount" >400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="3" />
</td>
<td>3</td>
<td>Thasammal Thangaiah</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount" >400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="4" />
</td>
<td>4</td>
<td>Roselet</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="5" />
</td>
<td>5</td>
<td>Kamalam Chellam R.</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount">400.00</td>
</tr>
</tbody>
</table>
<button id="submit">Submit</button>
<script type="text/javascript" src="<?= base_url(assets/js/jquery.min.js) ?>"></script>
<script type="text/javascript">
function jsonify(){
var rows = $('#details tr');
var a = [];
rows.each(function(){
if($(this).find('#bene_id').is(':checked'))
{
var bene_id = $(this).find('#bene_id').val();
var stipendiary = $(this).find('#amount').html();
var bonus = $(this).find('#bonus').val();
var x = {
bene_id:bene_id,
stipendiary:stipendiary,
bonus:bonus
};
a.push(x);
}
});
var c = JSON.stringify(a);
return c;
}
$(function(){
$('#submit').click(function(){
$data = jsonify();
$.ajax({
type:'POST',
url:'<?= base_url('controller/method_name') ?>',
data:{details:data},
success:function(response)
{
//if you data save successfuly, do sth here..
}
});
});
});
The following code is a PHP code of the action method on the specified controller:
public function method_name()
{
$details = json_decode($this->input->post('details'));
foreach($details as $det ){
$bene_id = $det->bene_id;
$stipendiary = $det->stipendiary;
$bonus = $det->bonus;
// your logic goes here
}
}
In this solution i didn't considered the validation and security issues, because i wanted to make it simple, so before you put it in your production server you must deal with these issues.
I hope it helps.
Below is code snippet of my HTML page:
<div id="top">
<button type="button" name="ptmBtn" id="ptmBtn">PTM</button>
</div>
<div id="bottomleft">
<b>Contact List</b>
<table id="cntList">
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Aniruddh </td>
</tr>
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Ajay <td>
</tr>
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Vijay </td>
</tr>
</table>
</div>
<div id="bottomRight">
<b>Group List</b>
<table id="grpList">
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Group1 </td>
</tr>
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Group2 <td>
</tr>
</table>
</div>
I am developing a Web application where I send messages to users by the push of a button. I have two HTML tables on my page namely Contacts with "id"="cntList" and Groups "id"="grpList"; where both tables will have names and a checkbox corresponding to them.
When I click on some contact in Contacts table or a group in the Group table, my code should understand whether it is from a Contacts table or it is a Group table and call the function to send the message accordingly.
I am getting how to start with JQuery in this?
You can retrieve the id of the clicked parent table element within event handler by checking the .id property of this, or event.currentTarget using .closest() with table[id$=List] as selector passed, .attr() with "id" as parameter
var selector = "table[id$=List]";
$(selector + " :checkbox").click(function(event) {
console.log($(this).closest(selector).attr("id"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="top">
<button type="button" name="ptmBtn" id="ptmBtn">PTM</button>
</div>
<div id="bottomleft">
<b>Contact List</b>
<table id="cntList">
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Aniruddh</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Ajay
<td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Vijay</td>
</tr>
</table>
</div>
<div id="bottomRight">
<b>Group List</b>
<table id="grpList">
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Group1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Group2
<td>
</tr>
</table>
</div>
I'm looking for a Javascript or jQuery solution, either works.
Anyway, when a user selects one of the choices for the radio buttons, I want a different set of checkboxes to show up. So, if a user chooses By Name, the name checkboxes will show up. And then when the user chooses By Title, the name checkboxes will disappear and the title checkboxes will show up.
When a page loads, and an option is not chosen, no checkboxes should appear
Here is what the HTML looks like:
<table>
<tr>
<td><input type="radio" name="selectType" value="byName" />By Name</td>
<td><input type="radio" name="selectType" value="byTitle" />By Title</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectName1" />Name 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectName1" />Name 2</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectTitle1" />Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectTitle2" />Title 2</td>
</tr>
</table>
What would this code look like?
I would use data attributes to reference groups of checkboxes. This way you can make your code really flexible and unobtrusive:
$('.type-check').change(function() {
$('.type-group').hide().filter('.type-group-' + $(this).data('type')).show();
});
HTML sample:
<tr>
<td><input type="radio" name="selectType" class="type-check" data-type="name" value="byName" /> By Name</td>
<td><input type="radio" name="selectType" class="type-check" data-type="title" value="byTitle" /> By Title</td>
</tr>
http://jsfiddle.net/D8s9G/
First give your checkboxes classes..
<input type="checkbox" name="selectName1" class="name"/>Name 1
<input type="checkbox" name="selectName2" class="name"/>Name 2
do the same for titles and give them a class name of 'title' and for your radios too..
<input type="radio" name="selectType" value="byName" class="radioName" />
then;
$(document).ready(function () {
$('.radioName').click(function () {
$('.name').show();
$('.title').hide();
});
//same logic for titles..
});
Here is a working solution - http://jsfiddle.net/FloydPink/fkvSg/
jQuery:
$('.name').closest('tr').toggle(false);
$('.title').closest('tr').toggle(false);
$('input[name=selectType]').change(function () {
var byNameSelected = $(this).val() == 'byName';
$('.name').closest('tr').toggle(byNameSelected);
$('.title').closest('tr').toggle(!byNameSelected);
});
HTML:
<table>
<tr>
<td>
<input type="radio" name="selectType" value="byName" />By Name</td>
<td>
<input type="radio" name="selectType" value="byTitle" />By Title</td>
</tr>
<tr>
<td>
<input type="checkbox" class="name" name="selectName1" />Name 1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="name" name="selectName2" />Name 2</td>
</tr>
<tr>
<td>
<input type="checkbox" class="title" name="selectTitle1" />Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="title" name="selectTitle2" />Title 2</td>
</tr>
</table>
I have added css classes to all the four checkboxes, so that the group of 'Name' and 'Title' checkboxes could be grouped.
You can select the inputs with their name and show or hide the relevant inputs:
$('input[value*="byName"]').click( function() {
$('input[name*="selectName1"]').show();
$('input[name*="selectTitle1"]').hide();
}
$('input[value*="byTitle"]').click( function() {
$('input[name*="selectName1"]').hide();
$('input[name*="selectTitle1"]').show();
}