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>
Related
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 5 years ago.
Brief
I am attempting to change the value of all dropdown boxes with the class of admin__control-select to remove when the Remove All button is pressed
Issue
The below code appears to work, but only updates the value of the first select box. I tried using querySelectorAll but that doesn't work at all.
Code
<script type="text/javascript">
var selectFunction = function() {
document.querySelector('.admin__control-select').value = "remove";
};
</script>
<select class="admin__control-select">
<option value="defaultValue">Default</option>
<option value="Option1">Option1</option>
<option value="remove">Remove</option>
</select>
<select class="admin__control-select">
<option value="defaultValue">Default</option>
<option value="Option1">Option1</option>
<option value="remove">Remove</option>
</select>
<input type="button" value="Remove All" onclick="selectFunction()" />
Use querySelectorAll(), it returns an Array with matched elements.
Then, traverse the array with for().
var elms = document.querySelectorAll('.admin__control-select');
for(var i=0; i<elms.length; i++){
elms[i].value ='remove';
}
Try this:
<script type="text/javascript">
var selectFunction = function() {
var selects = document.querySelectorAll('.admin__control-select');
selects.forEach(s => s.value = 'remove');
};
</script>
<select class="admin__control-select">
<option value="defaultValue">Default</option>
<option value="Option1">Option1</option>
<option value="remove">Remove</option>
</select>
<select class="admin__control-select">
<option value="defaultValue">Default</option>
<option value="Option1">Option1</option>
<option value="remove">Remove</option>
</select>
<input type="button" value="Remove All" onclick="selectFunction()" />
querySelectorAll()
returns the elements so you have to loop over them and set the value property.
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;
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;