This question already has answers here:
Selecting an option element from a dropdown by its text value
(4 answers)
Closed 6 years ago.
First, I have absolutely no knowledge in JavaScript.
I try to return the value of an option from the HTML list below.
example:
I have the var: "NAME_1"
I need to return string : "number:50640"
How is this accomplished?
<select class="form-control select-field ng-pristine ng-valid ng-not-empty ng-touched" id="upsell_product" name="upsell_product" ng-change="productSelected()" ng-options="product.id as product.name for product in products" ng-model="upsell.product_id">
<option value="" class="" selected="selected">-- Select a Product --</option>
<option label="NAME_1" value="number:50640">NAME_1</option>
<option label="NAME_2" value="number:63732">NAME_2</option>
<option label="NAME_3" value="number:32673">NAME_3</option>
<option label="NAME_4" value="number:09723">NAME_4</option>
<option label="NAME_5" value="number:23832">NAME_5</option>
</select>
This is how get value:
var selectVal=document.querySelector("select.select-field").value;
This is how bind when user selects:
document.querySelector("select.select-field").addEventListener("change",function(){
var selectVal= this.value;
});
you can access the control using
var selectBox = document.getElementById('upsell_product');
and read the eslected options value
var selected = selectBox.options[selectBox.selectedIndex].value;
Related
This question already has answers here:
Javascript/jQuery: Set Values (Selection) in a multiple Select
(9 answers)
Closed 5 years ago.
I have a html
<select name="availableon[]" class="form-control" multiple>
<option value="pc">PC</option>
<option value="iphone">iPhone</option>
<option value="android">Android</option>
</select>
And in my AJAX success function I have the value
availableon = 'pc,iphone'
Now I want to explode the availableon variable and select the multiple select based on value using javascript or jquery. How will I do that?
You can change the data to an array and then set the value with the array
var availableon = 'pc,iphone'
var dataarray = availableon.split(",");
$("select").val(dataarray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="availableon[]" class="form-control" multiple>
<option value="pc">PC</option>
<option value="iphone">iPhone</option>
<option value="android">Android</option>
</select>
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;
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Javascript to Select Multiple options
How can I select an option of HTML <select multiple> element using JavaScript?
My quick example:
<select multiple id="select">
<option value="1">1</option>
<option value="2" class="toselect">2</option>
<option value="3">3</option>
<option value="4" class="toselect">4</option>
<option value="5">5</option>
</select>
<script type="text/javascript">
var select = document.getElementById("select");
var select_options = select.getElementsByClassName("toselect");
for (var i = 0; typeof(select_options) != "undefined"; i++) {
select_options[i].selected = true;
}
</script>
Here, I'm using class names to designate which options needs to be selected. You can use whatever you want.
Something like this:
var selectBox = document.getElementById('selectbox');
selectBox.children[1].selected = true;
Complete example: jsFiddle
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to get the selected value of dropdownlist using JavaScript?
I have a select:
<select id="short_code">
<option value="12">First</option>
<option value="11">Second</option>
<option value="10">Third</option>
<option value="9">Fourth</option>
</select>
I want to get the value of the selected text. e.g. if the selected text is First so the I need to get 12.
document.getElementById('short_code').value
This should do it:
<script type="text/javascript">
function getSelected(select) {
alert(select.options[select.selectedIndex].value);
}
</script>
<select id="short_code" onchange="getSelected(this)">
<option value="12">First</option>
<option value="11">Second</option>
<option value="10">Third</option>
<option value="9">Fourth</option>
</select>
document.getElementById('short_code').options[document.getElementById('short_code').selectedIndex].text
Try this:
var el = document.getElementById("short_code");
var code = el.options[el.selectedIndex].value;
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');