This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to get the selected value of dropdownlist using JavaScript?
javascript selected value
I have a drop down list for quantities, like this:
<select id="Quantity" name="Quantity" class="quantity_select">
<option id="1" selected="selected" value="1">1</option>
<option id="2" value="2">2</option>
<option id="3" value="3">3</option>
</select>
I need to use javascript to find the value of the currently selected quantity. When I select e.g. option 2, the selected="selected" doesn't change to the new option. How can I use the DOM to get the current selected quantity?
Thanks
Option 1
HTML
<select id="Quantity" name="Quantity"
class="quantity_select" onchange="SetValue(this.value)>
<option id="1" selected="selected" value="1">1</option>
<option id="2" value="2">2</option>
<option id="3" value="3">3</option>
</select>
JavaScript
function SetValue(val) {
alert(val); // This will be the selected value in the drop down
}
Option 2
If you already have JS in place, and don't want to use option 1, you can simply get the value with getElementById():
var ddl = document.getElementById('Quantity');
var val = ddl.options[ddl.selectedIndex].value;
Use document.getElementById('Quantity').value
USe
document.getElementById('Quantity').options[document.getElementById('Quantity').selectedIndex].value;
Related
This question already has answers here:
Run change event for select even when same option is reselected
(6 answers)
Closed 5 years ago.
I want to override the general behavior of an HTML select element by making it fire the change event even when the selected option hasn't changed.
$('select').change(function() {
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
How can i achieve this?
You can try like this:-
HTML :
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
JS :
$("select").mouseup(function() {
var flag = $(this).data("flag");
var cur_val = $(this).val();
if(flag) {
alert(cur_val);
}
$(this).data("flag", !flag);
});
Here is working jsfiddle.
Give it a try, this should work.
I'm having a rather different structure of HTML and I am trying to get the selected value of a dropdown list as seen in the below code:
<div class="quantityDropdown quantityDropdown-cartItem">
<select id="qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421" class="cart-quantity-picker"
data-orderitem="61224b70-7b26-11e6-91d5-6921d6fe7421">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
My code returns null.
I want to get 2 as my value. As you can see, there's no value in the selected attribute.
var quantity = document.querySelector(".quantityDropdown select").getAttribute("selected");
How do I get the value 2 that's outside the option tag?
You should get the option tag, like this:
var quantity = document.querySelector(".quantityDropdown select option:checked");
You could use checked also for checkbox and radio.
This will give you the value of the selected item:
quantity = document.querySelector(".quantityDropdown select").value;
However if you want the actual content of the selected item (i.e. the text shown) outside of the option tag, use:
var quantity = document.querySelector(".quantityDropdown select")[document.querySelector(".quantityDropdown select").selectedIndex].innerHTML;
Use document.querySelector(".quantityDropdown select").selectedIndex
To get the selected option value you need to use two properties on the select element: options and selectedIndex to get the html option element, then you can get the value.
const dropdown = document.querySelector('.cart-quantity-picker')
console.log('selectedIndex', dropdown.selectedIndex)
console.log('options', dropdown.options)
console.log('selected', dropdown.options[dropdown.selectedIndex].value)
<div class="quantityDropdown quantityDropdown-cartItem">
<select id="qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421" class="cart-quantity-picker" data-orderitem="61224b70-7b26-11e6-91d5-6921d6fe7421">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
in case you need the get the 'value' :
var dropdown = document.getElementById("qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421");
var selValue = dropdown.options[dropdown.selectedIndex].value;
But if you want to get the text ΝΟΤ the value , you do:
var dropdown = document.getElementById("qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421");
var selText = dropdown.options[dropdown.selectedIndex].text;
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
For getting the value you can use
document.querySelector('#qtySelect option:checked').value;
For getting the actual text inside the option you can use
document.querySelector('#qtySelect option:checked').text;
I have a <select> tag and I want it to change the value of a hidden input when an option is selected.
What I thought was to use this:
<input type=hidden value=Ineedtochangethis name=asdf>
<select><option onselect="stuff()">Option 1 is selected</option>...</select>
And then this
function stuff() {
document.getElementsByName("asdf").value=opt1slct;
}
Of course, it doesn't work. What can I do to get a similar effect?
please check following code:
<select onChange="jsFunction()" id="selectOpt">
<option value="1" >1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
function jsFunction(){
var myselect = document.getElementById("selectOpt");
if(myselect.options[myselect.selectedIndex].value == 1){
alert('hide');
}else{
alert('show');
}
}
By using the selectedIndex property (and potentially the options one as well) of your select element.
<input id="yourHiddenField" type="hidden"/>
<select onchange="stuff(this);">
<option>Option 1 is selected</option>
</select>
And the JavaScript:
function stuff(yourSelectElement){
document.getElementById('yourHiddenField').value = yourSelectElement.options[yourSelectElement.selectedIndex].innerHTML;
}
And if you want to store just one number in your hidden field, use the value attribute on your option tags like so:
<option value="1">Option 1 is selected</option>
Then the JS changes like this:
document.getElementById('yourHiddenField').value = yourSelectElement.options[yourSelectElement.selectedIndex].value;
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
$(".one").change(function(){
})
I would like make - for example if i select in first position option 1 then i others selects this option should be removed.
So if i in first select i select 1 then in select second and third i have only option 2 and 3. If in second select i select 2 then in last select i have only option 3.
How can i make it? I would like use jQuery.
LIVE: http://jsfiddle.net/9N9Tz/1/
If you need to sort something, consider using something like jQuery UI sortable as a bunch of drop down menus make a really poor UX for that.
But to answer your question:
var $selects = $('.one');
$selects.on("keyup click change", function(e) {
$selects.not(this).trigger('updateselection');
}).on("updateselection", function(e, data) {
var $this = $(this);
$this.children().show();
$selects.not(this).each(function() {
var value = $(this).val();
if (value) {
$this.children('[value="' + value + '"]').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Hiding an option works in current firefox. I'm not sure about legacy browser. Hiding, but not removing, the element makes sure that you can change your selection without having crippled your input elements.
Here you go http://jsfiddle.net/Calou/9N9Tz/6/.
When the value of the <select>s changes, just take this value and search for the <option>s with this value in the others <select>s and remove them.
$(".one").change(function(){
var val = this.value
if (val !== '') {
$(this).siblings().find('option[value=' + val + ']').remove()
}
})
// As soon as all selects have one class, you'll have to distinguish them:
$(".one").each(function() {
// Now this corresponds to one select (in the loop over all)
$(this).change(function() {
// Fix what've done before
$('option').show();
// Find every other select, find an option in it
// that has the same value that is selected in current select
// (sorry for the description)
$('.one').not(this).find('option[value=' + $(this).find('option:selected').val() +']').hide();
});
});
jsFiddle
It will be easy if you use different class for second and third select element
$(".one").change(function(){
var val = parseInt($(this).val());
$('.two,.three').find('option:contains('+val+')').remove();
});
EDIT:
Updated code to apply for multiple selects. [Thanks to all commentators and Alex for bringing it to notice ]
$(".one").change(function(){
var val = parseInt($(this).val());
$(this).siblings().find('option:contains('+val+')').remove();
});
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
jQuery / Programmatically Select an Option in Select Box
I was wondering, is it possible to select an option from a selectbox/combobox directly from jQuery. For example I want to select the option with the value 5 in a select with values from 1 to 10.
The only solution I can think of is to remove all options and recreate them with the right selected value, but that's a bit unefficient.
Just treat the select box as you would any other input element:
$("#MySelectBox").val("5");
You can do this by adding the selected attribute in <option> tag.
$(document).ready(function () {
$('#btn2').click(function(){
$('#sel1 option[value=2]').attr('selected','selected');
});
$('#btn3').click(function(){
$('#sel1 option[value=3]').attr('selected','selected');
});
$('#btn5').click(function(){
$('#sel1 option[value=5]').attr('selected','selected');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<select id="sel1">
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
<option value='4'>Option 4</option>
<option value='5'>Option 5</option>
<option value='6'>Option 6</option>
<option value='7'>Option 7</option>
<option value='8'>Option 8</option>
<option value='9'>Option 9</option>
</select>
<input id="btn2" type=button value='Select 2' />
<input id="btn3" type=button value='Select 3' />
<input id="btn5" type=button value='Select 5' />
Of course you can
Just use this code to select option 5:
$("#ComboBox").val(5);
example
All you have to do is go around setting the attribute selected to true or selected.
var arrayOfOptions = $('#mySelect option') //will return an array of options in the order they are found
Just iterate over them, something like:
for(var i=0; i<arrayOfOptions.length; i++) {
var opt = arrayOfOptions[i];
//feel free to check the index of i here if you want to set
//a particular index to selected or a range.
//similarly the range can be passed in as a function parameter.
$(opt).attr('selected','selected');
}
If I understand you correctly, you want to select the option with value=5 and mark it selected. If so, this should be it:
$("#selectBox[value='5']").attr('selected', 'selected');
This should also work:
$("#selectBox").attr('value', 5).attr('selected', 'selected');