How to get ID of select when user selected option? - javascript

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

page load select dropdown box option automatically

<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>

How to empty a value from the first option of a select box option using javascript or jquery?

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.

Remove last option value from multiple select element using jQuery

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>

Change value of select list with value of another select list jquery

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>

Mutually exclusive select boxes

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>

Categories

Resources