I have 2 select option. Now I want to get id of select when user selected option. Ex: If I selected Option1 then alert id="my_select1" and if I selected MyOption2 then alert id="my_select2". How can I do that?
<select id="my_select1">
<option value="o1" id="id1">Option1</option>
<option value="o2" id="id2">Option2</option>
</select>
<select id="my_select2">
<option value="mo1" id="mid1">MyOption1</option>
<option value="mo2" id="mid2">MyOption2</option>
</select>
$('select').change(function() {
alert($(this).attr('id'))//use attr() to get id
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="my_select1">
<option value="o1" id="id1">Option1</option>
<option value="o2" id="id2">Option2</option>
</select>
<select id="my_select2">
<option value="mo1" id="mid1">MyOption1</option>
<option value="mo2" id="mid2">MyOption2</option>
</select>
Use .attr() to get id
Use $(this) to get the id of the select that made the change
Bind a change event handler and use this.id to get id of the event fired select tag. Although you can use $(this).attr('id') to get the id attribute value.
$('#my_select1,#my_select2').change(function() {
alert(this.id)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="my_select1">
<option value="o1" id="id1">Option1</option>
<option value="o2" id="id2">Option2</option>
</select>
<select id="my_select2">
<option value="mo1" id="mid1">MyOption1</option>
<option value="mo2" id="mid2">MyOption2</option>
</select>
Related
<select name="optionSnoInput" class="chosen-select" onchange="goodsViewController.option_price_display(this);">
<option value="">option</option>
<option value="104">A</option>
<option value="105">B</option>
<option value="106">C</option>
<option value="107">D</option>
<option value="108">count</option>
</select>
On the above dropdown,
I want last option 'count' is automatically selected
because I need counting each product's selling Quantity
but my shop program is counting Quantity as option not product
so I add 'count' option, and use 'display:none' css code..
Please suggest!
Thanks.
You can do it with JQuery this way to:
$(window).on('load', function(){
$('.chosen-select option:last-child').attr('selected','selected');
})
$(window).on('load', function(){
$('.chosen-select option:last-child').attr('selected','selected');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="optionSnoInput" class="chosen-select" onchange="goodsViewController.option_price_display(this);">
<option value="">option</option>
<option value="104">A</option>
<option value="105">B</option>
<option value="106">C</option>
<option value="107">D</option>
<option value="108">count</option>
</select>
Use selected for the default option.
<option value="108" selected>count</option>
Here's my code. Is it possible to empty the value of the first option using jquery/javascript ?
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
so it will become like that:
<option value="">Select category</option>
I already know that i can remove the whole first option by targeting its value
$("#select_1 option[value='0']").remove();
You can use plain javascript to get the first option of a select element using .options like so, which returns an indexed collection, so you can just use zero based index to grab the first option and set it's value property:
document.getElementById("select_1").options[0].value = '';
To target the first element of a collection use :first. Then you can use val('') to remove the value from it:
$('#select_1 option:first').val('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
<script>
$(document).ready(function (){
$('#btnremoveoption').click(function (){
$('#select_1 option:first').remove();
});
});
</script>
<body>
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
<input type="button" id="btnremoveoption" value="Click to Remove all Options" onclick="Remove_options()"/>
</body>
This Program will keep Removing first option when ever button will be click.
$(document).ready(function (){
$('#select_1 option:first').remove();
});
this will remove it onload of the page. without leaving the option blank it will be filled with the next option.
I have two select element and I need to remove last option from both select using jQuery.
First Select Element
<select class="selBooks" name="select1" >
<option value="8247(random)">Opt2</option>
<option value="1939(random)">Opt1</option>
</select>
Second Select Element
<select class="selBooks" name="select2" >
<option value="8244(random)">Opt3</option>
<option value="1938(random)">Opt4</option>
</select>
jQuery
$(".selBooks option:last").remove();
When I try this it only removes last option of second select element. Please guide me if I am doing anything wrong or there is other way to achieve this.
iterate .selBooks with loop and remove the last element of that class.
$('.selBooks').each(function() {
$(this).find("option:last").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selBooks" name="select1" >
<option value="8247(random)">Opt2</option>
<option value="1939(random)">Opt1</option>
</select>
Second Select Element
<select class="selBooks" name="select2" >
<option value="8244(random)">Opt3</option>
<option value="1938(random)">Opt4</option>
</select>
jQuery
Try by name
$(".selBooks[name=select1] option:last").remove();
$(".selBooks[name=select2] option:last").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selBooks" name="select1" >
<option value="8247(random)">Opt2</option>
<option value="1939(random)">Opt1</option>
</select>
Second Select Element
<select class="selBooks" name="select2" >
<option value="8244(random)">Opt3</option>
<option value="1938(random)">Opt4</option>
</select>
Use last-child.
$('.selBooks option:last-child').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selBooks" name="select1">
<option value="8247(random)">Opt2</option>
<option value="1939(random)">Opt1</option>
</select>
<select class="selBooks" name="select2">
<option value="8244(random)">Opt3</option>
<option value="1938(random)">Opt4</option>
</select>
How can I change the value of a select list with the value of another select list
<select class="main-filter" id="Test1" name="Test1"><option value="">Select Option</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
Need to replace #ReplaceThisText# with value selected from above select box
<select id="selectfilter" name="selectfilter" class="form-control main-filter">
<option value="">Sort Products</option>
<option value="/?id=na&selectfilter=hl&Type=#ReplaceThisText#">Chnage Value</option>
</select>
I have tried code from this link Change the Text of a Option with jQuery
and jquery how to find and replace a selected option that has a certain value
but cannot seem to get it to work
My code is
$('#Test1').change(function () {
sessionStorage.setItem("Test1", $(this).val());
$('.main-filter :selected:contains("#ReplaceThisText#")').val($(this).val());
location.href = $(this).val();
});
:contains will look at the .text() value - but your #ReplaceThisText# is not in the .text() value - so you'll need to use .filter() to find it instead:
Adding some console.logs so you can see what's happening and updated the .val(newval) code to make the replacement.
$('#Test1').change(function() {
var newval = $(this).val();
console.log("before", $(".main-filter :contains('Change Value')").val())
var opt = $('.main-filter option').filter(function() {
return $(this).val().indexOf("#ReplaceThisText#") >= 0;
});
console.log("opt length", opt.length);
opt.each(function() {
$(this).val($(this).val().replace(/#ReplaceThisText#/gi, newval));
});
console.log("after", $(".main-filter :contains('Change Value')").val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="main-filter" id="Test1" name="Test1">
<option value="">Select Option</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<select id="selectfilter" name="selectfilter" class="form-control main-filter">
<option value="">Sort Products</option>
<option value="/?id=na&selectfilter=hl&Type=#ReplaceThisText#">Change Value</option>
</select>
I have 2 select boxes. On change of one select box, I want the other select box to be defaulted to Select a value, ie val()==0, and vice versa. Only one select box should have a value selected at a time. How do I do this? I tried the code below but it does not work.
$("#select_one").change(function() {
if ('#select_two'.val() != 0) {
$('#select_two').val(0);
}
});
The simplest way to do this would be to place a common class on both the select. You can then select that class in jQuery and use not() to exclude the current element before resetting the value, something like this:
$('.select').change(function() {
$('.select').not(this).val(0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-one" class="select">
<option value="0">Please select</option>
<option>Foo</option>
<option>Bar</option>
<option>Fizz</option>
<option>Buzz</option>
</select>
<select id="select-two" class="select">
<option value="0">Please select</option>
<option>Foo</option>
<option>Bar</option>
<option>Fizz</option>
<option>Buzz</option>
</select>
You may set the selectedIndex to 0:
$('select[id^="select_"]').on('change', function(e) {
$('select[id^="select_"]').not(this).prop('selectedIndex', 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_one">
<option value="volvo">1</option>
<option value="saab">2</option>
<option value="mercedes">3</option>
<option value="audi">4</option>
</select>
<select id="select_two">
<option value="volvo">11</option>
<option value="saab">22</option>
<option value="mercedes">33</option>
<option value="audi">44</option>
</select>
That could be done using two simple change events, like the following example.
Else if you want to use one event you could use a common class as #Rory McCrossan answer shows..
Hope this helps.
$("#select_one").change(function() {
$('#select_two').val(0)
});
$("#select_two").change(function() {
$('#select_one').val(0)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_one">
<option value="0">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<select id="select_two">
<option value="0">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>