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?

Answer 1

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;
        }
    }
}
​