CODEWITHSUNDEEP
javascriptselectgetelementbyid
edsonski
edsonski

Reputation: 63

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!

Upvotes: 1

Views: 18339

Answers (5)

mitjak
mitjak

Reputation: 54

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

http://jsfiddle.net/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)); 
        }
    });
});

Upvotes: 0

zeenfaiz
zeenfaiz

Reputation: 151

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

}

Upvotes: 0

SMS
SMS

Reputation: 462

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>

Upvotes: 2

hima
hima

Reputation: 620

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

Upvotes: 0

bobince
bobince

Reputation: 536775

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?

eg

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

Upvotes: 0

Related Questions