Change Select tag value using JavaScript

I'm trying to change a value from a select tag using JavaScript. Let's say that I have this textbox, and if that textbox is null, no changes will be done and the value of the select tag options will be as is. But if that textbox is filled, then I have to assign a different value aside from the ones in the select tag options.

Here's what I'm trying to do:

HTML:

<input type="text" id="txtTest" />
<select name="rdoSelect" id="rdoSelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

JavaScript:

if (document.getElementById('txtTest').value===null)
{
    document.getElementById('rdoSelect').value;
}
else
{
    document.getElementById('rdoSelect').value = "option 3";
}

I can't make it work. I've tried pointing it to an element/variable rather than to a value and it still doesn't work:

var test = document.getElementById('rdoSelect');
test.value = "option 3";

I need help, please. Thanks!

Here's what I'm trying to do:

HTML:

<input type="text" id="txtTest" />
<select name="rdoSelect" id="rdoSelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

JavaScript:

if (document.getElementById('txtTest').value===null)
{
    document.getElementById('rdoSelect').value;
}
else
{
    document.getElementById('rdoSelect').value = "option 3";
}

I can't make it work. I've tried pointing it to an element/variable rather than to a value and it still doesn't work:

var test = document.getElementById('rdoSelect');
test.value = "option 3";

I need help, please. Thanks!

Share Improve this question asked Aug 2, 2013 at 12:15 edsonski 631 gold badge3 silver badges8 bronze badges

you have to change the selected attribute on the option element (and deselect all option before that) – Balint Bako Commented Aug 2, 2013 at 12:19
A value of an text input will never be null. If there's no text in the input, it's value is ''. This does nothing: document.getElementById('rdoSelect').value;. You can change the selected value of an select element by setting its selectedIndex. Though setting value of select element might work in some browsers, you can't rely it'll do the job in all browsers. – Teemu Commented Aug 2, 2013 at 12:23
Why you pare with null instead of blank string? ` =="" ` – Vahid Hallaji Commented Aug 2, 2013 at 12:25
Oh. I'm sorry. I thought you could pare it to null. My bad. Thanks, though. – edsonski Commented Aug 2, 2013 at 13:21

Add a ment |

5 Answers 5

Sorted by: Reset to default 2

Try using SelectIndex method. Please refer the below code.

I added OnChange event to input text to test this sample.

<html>
<head>
<script language="javascript">

    function test()
    {   
        if (document.getElementById('txtTest').value=='')
        {
            document.getElementById("rdoSelect").selectedIndex = 0;
        }
        else
        {
            document.getElementById("rdoSelect").selectedIndex = 1;
        }
    }

</script>
</head>
<body>
<input type="text" id="txtTest" onchange="test();" />
<select name="rdoSelect" id="rdoSelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>
</body>
</html>

HTMLSelectElement doesn't let you set the value directly. It's possible to have many or zero <option>s with a particular value, so it's not a straightforward 1:1 mapping.

To select an option you can either set its selected property to true, or set the selectedIndex property of the select to the option number.

There is no option 3 in your select—are you trying to add a new option?

function setOrCreateSelectValue(select, value) {
    for (var i= select.options.length; i-->0;) {
        if (select.options[i].value==value) {
            select.selectedIndex= i;
            return;
        }
    }
    select.options[select.options.length]= new Option(value, value, true, true);
}

Is this happening on button click or onkeyup? Either way in the function you can add value to dropdownlist using this:

dropdownlist.append(
    $("<option selected='selected'></option>").val(sValId).html(sVal)
);

Or you colud try this

var optn = document.createElement("OPTION");
optn.text = "--Select--";
optn.value = "0";
baseCurve.options.add(optn);`

    if (document.getElementById('txtTest').value===null)
    {
        document.getElementById('rdoSelect').value;
    }
    else
    {
       var val = document.getElementById('txtTest').value
       for(var i, j = 0; i = rdoSelect.options[j]; j++) {
        if(i.value == val) {
            rdoSelect.selectedIndex = j;
            break;
        }
    }

}

Take a look at this jsfiddle, it's using jquery, which is probably the most mon solution. Hope it helps.

http://jsfiddle/GkLsZ/

$(function() {
    $('#btnChange').on('click', function() {
        var value = $.trim($('#txtTest').val());

        if (!!value) {
            $('#rdoSelect')
                .append($("<option></option>")
                .attr("value", value)
                .attr("selected", "selected")
                .text(value)); 
        }
    });
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Change Select tag value using JavaScript - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)