I'm searching and searching and can not find anything exactly what I need.

So I need javascript, that will select option from dropdown, but not by the option value number, but name.

I have:

<select class="aa" id="local" name="local">
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>

So I need to select • Jawor by name, not by id - it's the most important. How do I make it work?

I'm searching and searching and can not find anything exactly what I need.

So I need javascript, that will select option from dropdown, but not by the option value number, but name.

I have:

<select class="aa" id="local" name="local">
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>

So I need to select • Jawor by name, not by id - it's the most important. How do I make it work?

• javascript

• 2 stackoverflow./questions/3989324/… – Goose Commented Apr 14, 2016 at 22:31

4 Answers 4

For you is it like;

var options = document.getElementsByClassName("aa")[0].options,
	name ="Jawor";

for(i = 0; i < options.length; i++){
   if(options[i].text.indexOf(name) > -1){
    	options[i].selected = true;
        break;
    }
}

<select class="aa" id="local" name="local">
    <option value="0">Cała Polska</option>
    <option value="1">Dolnośląskie</option>
    <option value="100">• Bolesławiec</option>
    <option value="101">• Dzierżoniów</option>
    <option value="102">• Głogów</option>
    <option value="103">• Góra</option>
    <option value="104">• Jawor</option>
    <option value="105">• Jelenia Góra</option>
</select>

U need to Use onChange Event Handler ... for example

<select onchange="showSelected()">

Then write your script ...

<script>

function showSelected(){
    var s=document.getElementById('local');          //refers to that select with all options    
    var selectText=s.options[s.selectedIndex].text   // takes the one which the user will select
    alert(selectText)                                //Showing the text selected ...
}
</script>

Rest of your code is okay !

<select class="aa" id="local" name="local" onchange='showSelected'()>
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>

Using jquery here. You can use the following function:

function selectFromDropdown(selector, text) {
  $(selector).find('option').each(function() {
    if ($(this).text() == text) {
      $(selector).val($(this).val());
    }
  })
}

A demo:

function selectFromDropdown(selector, text) {
  $(selector).find('option').each(function() {
    if ($(this).text() == text) {
      $(selector).val($(this).val());
      return false;
    }
  })
}

//use the function

setTimeout(function() {
  selectFromDropdown('#local', '• Dzierżoniów')
}, 1000)
setTimeout(function() {
  selectFromDropdown('#local', '• Jawor')
}, 4000)

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="aa" id="local" name="local">
  <option value="">Select</option>
  <option value="0">Cała Polska</option>
  <option value="1">Dolnośląskie</option>
  <option value="100">• Bolesławiec</option>
  <option value="101">• Dzierżoniów</option>
  <option value="102">• Głogów</option>
  <option value="103">• Góra</option>
  <option value="104">• Jawor</option>
  <option value="105">• Jelenia Góra</option>
</select>

for chrome console use this

document.getElementById("id").selectedIndex = '3'; or
document.getElementById('id').value = 'BA';