Develop Reference

Change span text with selected option

I am on beginning of the coding life. I am trying to change text in span with selected option, but it gives me values not texts. For example, when I select the bus option, I want it to shows me the "bus" text. I do not want value number. Thanks in advance.
<select id="vehicles" onchange="showChange()">
<option value="1">Bus</option>
<option value="2">Car</option>
<option value="3">Plane</option>
</select>
<span id="vehicle"></span>
<script>
function showChange(){
var selected_vehicle = document.getElementById("vehicles").value;
document.getElementById("vehicle").innerText = selected_vehicle;
}
</script>

You can first pass this keyword to the function then get the text using selectedIndex of option.
<select id="vehicles" onchange="showChange(this)">
<option value="1">Bus</option>
<option value="2">Car</option>
<option value="3">Plane</option>
</select>
<span id="vehicle"></span>
<script>
function showChange(el){
var selected_vehicle = el.options[el.selectedIndex].text;
document.getElementById("vehicle").innerText = selected_vehicle;
}
</script>

If you keep the inline declarations from your HTML ( generally the preferred approach ) you can assign your event handlers in a separate file. Also, as a point of note - if you submit the form data in the traditional manner ( rather than with AJAX etc ) then the select element needs a name - an ID will NOT appear in the REQUEST array!
document.querySelector('select[name="vehicles"]').addEventListener('change',e=>{
e.target.nextElementSibling.textContent=[ e.target.value, e.target.options[e.target.options.selectedIndex].text].join(' ')
})
<select name='vehicles'>
<option selected hidden disabled>Select mode of transport
<option value='1'>Bus
<option value='2'>Car
<option value='3'>Plane
</select>
<span id='vehicle'></span>

Get Select Array Value on JavaScript

I want to get Select Element Array value using javascript but i cant get i get all other element value like text etc but cant get select array value.
Select element in My Html code
<select name="abc[]"></select>
<select name="abc[]"></select>
and Javascript Code for get Select Value
document.querySelectorAll("input[name='abc[]']")
but cant get its value, Help me out of this

First: use select, not input in your css selector. Here's a snippet to find the value and text of the selected option:
const selectedOption = document.querySelector(`select[name='abc[]'] > option:checked`);
console.log(`Value: ${selectedOption.value}, Text: ${selectedOption.textContent}`);
<select name="abc[]">
<option value="1">text 1</option>
<option value="2">text 2</option>
<option value="3" selected>text 3</option>
<option value="4">text 4</option>
</select>

Try this : [1]: https://jsfiddle.net/phiphophe/c7a3gdtn/1/
var matches = document.querySelectorAll("select[name='abc[]']");
for(var select of matches){
console.log(select.value);
}

Get selected value of dropdown

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;

how to set a value of a dropdown to that value having a class as "selected"-Jquery

I'm trying to set the value in a dropdown who has a classname = "selected".
here is the html:
<select style="width:180px;" class="chosen-select" id="range">
<option value="7 days">7days</option>
<option value="20days" class="selected">20days</option>
<option value="30days">30days</option>
</select>
now here is what im trying to work out:
js:
$("#range_select").find('option.selected'); //gives me:
<option value="20days" class="selected">20days</option>
below is a psedo code:
if($("#range_select").find('option').hasClass("selected")){
//set the value of the dropdown to "20days"
//currently showing the default value "7days"
}
https://jsfiddle.net/xwo10r7k/
how can i achieve this? Thanks for help!!

jsFiddle Demo
Store the range element, use it as a parent to find the class, and then set the range element's value as the child's value
var $r = $("#range");
$r.val($(".selected",$r).val());

use
$("#range").find('option.selected').attr("selected","selected");
updated fiddle https://jsfiddle.net/xwo10r7k/1/

how to fetch value from <select> tag

I have a list like
<select name="operation" id="operation">
<option value="1">XXXX</option>
<option value="2">YYY</option>
<option value="3">ZZZ</option>
</select>
I have to get value "XXXX" if user select an option 1, for 2nd I have to get show "YYYY" and so on. And format should be like in the above means i don't have to change value="1","2","3". I need it in javascript.
Thanks

You can get it by grabbing the <select> then getting the <option> at the .selectedIndex, like this:
var sel = document.getElementById('operation');
var text = sel.options[sel.selectedIndex].text;
You can test it out here.

var dropdown = document.getElementById('operation');
var selected = dropdown[dropdown.selectedIndex].text;
probably also check for selectedIndex not being out of bounds

Try this to alert selected option's text :
<select name="operation" id="operation"
onchange="alert(this.options[this.selectedIndex].text);">
<option value="1">XXXX</option>
<option value="2">YYY</option>
<option value="3">ZZZ</option>
</select>