使用JavaScript更改Select标记值_Javascript_Select_Getelementbyid

使用JavaScript更改Select标记值

javascript select

使用JavaScript更改Select标记值,javascript,select,getelementbyid,Javascript,Select,Getelementbyid,我正在尝试使用JavaScript更改select标记中的值。假设我有这个文本框，如果该文本框为null，则不会进行任何更改，并且选择标记选项的值将保持不变。但是如果这个文本框被填充了，那么除了选择标记选项中的值之外，我还必须指定一个不同的值以下是我想做的： HTML: 我做不到。我尝试将其指向一个元素/变量，而不是一个值，但仍然不起作用： var test = document.getElementById('rdoSelect'); test.value = "option 3"; 我需

我正在尝试使用JavaScript更改select标记中的值。假设我有这个文本框，如果该文本框为null，则不会进行任何更改，并且选择标记选项的值将保持不变。但是如果这个文本框被填充了，那么除了选择标记选项中的值之外，我还必须指定一个不同的值

以下是我想做的：

HTML:

我做不到。我尝试将其指向一个元素/变量，而不是一个值，但仍然不起作用：

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

我需要帮助。谢谢

这是在点击按钮还是按键时发生的？无论采用哪种方式，您都可以使用以下方法向dropdownlist添加值：

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

HTMLSelectElement不允许直接设置值。对于一个特定的值，可能有多个或零个，因此这不是一个简单的1:1映射

要选择选项，可以将其selected属性设置为true，或将select的selectedIndex属性设置为选项编号

您的选择中没有选项3您正在尝试添加新选项吗

乙二醇

尝试使用SelectIndex方法。请参考下面的代码

我在输入文本中添加了OnChange事件来测试这个示例

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

看看这个JSFIDLE，它使用的是jquery 这可能是最常见的解决方案。希望能有帮助

您必须更改option元素上的selected属性并取消选择all选项，然后文本输入的值将永远不会为null。如果输入中没有文本，则其值为。这不做任何操作：document.getElementById'rdoSelect.value；。通过设置选定元素的selectedIndex，可以更改选定元素的选定值。虽然select元素的设置值可能在某些浏览器中起作用，但您不能依赖它在所有浏览器中都起作用。为什么要用null而不是空字符串进行比较？`==`哦我很抱歉。我想你可以把它和空的进行比较。我的错。不过，谢谢。我觉得这更容易。谢谢

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

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

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

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

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

}

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

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