CODEWITHSUNDEEP
javascripthtmldom-events
Irfan Harun
Irfan Harun

Reputation: 1059

Selecting option in drop down menu on Onblur event using JavaScript

<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?

Upvotes: 0

Views: 9649

Answers (5)

Kashif Hanif
Kashif Hanif

Reputation: 1728

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

Upvotes: 1

sreejithsdev
sreejithsdev

Reputation: 1210

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>

Upvotes: 0

Ruchira Shree
Ruchira Shree

Reputation: 163

<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

Upvotes: 0

Nipun Jain
Nipun Jain

Reputation: 601

<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>

Upvotes: 0

Jason Whitted
Jason Whitted

Reputation: 4024

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

Upvotes: 1

Related Questions