Selecting option in drop down menu on Onblur event using JavaScript

Question

<select id="ddl_example4" name="ddl_example4">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
<option value="5">item5</option>
<option value="6">item6</option>
</select>

</br>
<textarea rows="4" cols="50" id="tarea" onblur="myFunction()"></textarea>

<script>

function myFunction()
{

var x = document.getElementById("tarea");
iteminput = document.getElementById("ddl_example4");
var v = x.value.substring(5);
alert(v);

function setSelectedIndex(s, v) {
for ( var i = 0; i < s.options.length; i++ ) {
if ( s.options[i].text == v ) {
s.options[i].selected = true;
return;
}
}
}
}    
</script>

On blur, I'm able to get the value in alert box but I'm unable to get the same value selected in the drop down box. I copied the function setselectedindex from some other site. Please let me know where I'm going wrong on this.

Is there a better way of achieving the same output using JavaScript?

Is this what you want ? http://stackoverflow.com/questions/1085801/how-to-get-the-selected-value-of-dropdownlist-using-javascript — Joddy, Dec 22 '12 at 06:04
Or Is this what you want - document.getElementById('ddl_example4').selectedIndex=2; — Joddy, Dec 22 '12 at 06:06

score 1 · Accepted Answer · answered Dec 22 '12 at 06:06

You included your setSelectedIndex function inside the myFunction function and you never actually called it.

Try this:

function myFunction()
{
    var x = document.getElementById("tarea");
    iteminput = document.getElementById("ddl_example4");
    var v = x.value.substring(5);
    setSelectedIndex(iteminput, v);
}    

function setSelectedIndex(s, v) {
    for ( var i = 0; i < s.options.length; i++ ) {
        if ( s.options[i].text == v ) {
            s.options[i].selected = true;
            return;
        }
    }
}

this is wat i had scribbled on my notepad in capital letters, yet i forgot to implement it .. this is exactly wat i was trying to achieve .. thanks a lot @Jason Whitted — Irfan Harun, Dec 22 '12 at 06:15

score 1 · Answer 2 · answered Dec 22 '12 at 06:11

<select id="ddl_example4" onblur="selectOption()" name="ddl_example4">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
<option value="5">item5</option>
<option value="6">item6</option>
</select>

/*
You can achieve it using jquery like this


Function selectOption()
{
$("#ddl_example4 option:selected").val();
OR
$("#ddl_example4").val();

*/To selct specific option just set it value......i,e to select "Item5"please use

$("#ddl_example4").val(5);
}

score 0 · Answer 3 · answered Dec 22 '12 at 06:07

<select id="ddl_example4" name="ddl_example4">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
<option value="5">item5</option>
<option value="6">item6</option>
</select>

</br>
<textarea rows="4" cols="50" id="tarea" onblur="myFunction()"></textarea>

<script>

function myFunction()
{

var x = document.getElementById("tarea");
var iteminput = document.getElementById("ddl_example4");
var v = x.value.substring(5);
alert(v);
setSelectedIndex(iteminput, v);
}

function setSelectedIndex(s, v) 
{
    for ( var i = 0; i < s.options.length; i++ ) 
    {
        if ( s.options[i].text == v ) 
        {
            s.options[i].selected = true;
            break;
        }
    }
}


</script>

score 0 · Answer 4 · answered Dec 22 '12 at 06:10

<select id="ddl_example4" name="ddl_example4">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
<option value="5">item5</option>
<option value="6">item6</option>
</select>

</br>
<textarea rows="4" cols="50" id="tarea" onblur="myFunction()"></textarea>

<script>

function myFunction()
{

var x = document.getElementById("tarea");
iteminput = document.getElementById("ddl_example4");
var v = x.value.substring(5);
alert(v);
s= iteminput;
setSelectedIndex(s, v);

}  

function setSelectedIndex(s, v) {
for ( var i = 0; i < s.options.length; i++ ) {
if ( s.options[i].text == v ) {
s.options[i].selected = true;
return;
}
}
}  
</script>

Try this with input to text box as 'rrrrritem2' then you will have item2 selected in drop down list

score 0 · Answer 5 · answered Dec 22 '12 at 06:11

Functions not closed properly.Check following code.

<select id="ddl_example4" name="ddl_example4">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
<option value="5">item5</option>
<option value="6">item6</option>
</select>

</br>
<textarea rows="4" cols="50" id="tarea" onblur="myFunction()"></textarea>
<script>

    function myFunction()
    {

    var x = document.getElementById("tarea");
    iteminput = document.getElementById("ddl_example4");
    var v = x.value.substring(5);
    alert(v);
    }
    function setSelectedIndex(s, v) {
    for ( var i = 0; i < s.options.length; i++ ) {
    if ( s.options[i].text == v ) {
    s.options[i].selected = true;
    return;
    }
    }
    }   
    </script>

Selecting option in drop down menu on Onblur event using JavaScript

5 Answers5