Question

我正在尝试使用JavaScript更改select标记中的值。假设我有这个文本框，如果该文本框为空，则不会进行任何更改，并且select标签选项的值将保持原样。但是如果填充了该文本框，那么我必须分配除select标签选项中的值以外的其他值。

这是我正在尝试做的事情：

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

我不能让它发挥作用。我已经尝试将它指向一个元素/变量而不是一个值，它仍然不起作用：

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

我需要帮助。谢谢！

Answer 1

尝试使用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>

Answer 2

这是按钮点击或键盘上发生的吗？无论哪种方式，您都可以使用以下方法为dropdownlist添加值：

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

Answer 3

HTMLSelectElement不允许您直接设置value。可能有许多或零<option> s具有特定值，因此它不是简单的1：1映射。

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

您的选择中没有option 3 - 您是否尝试添加新选项？

例如

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

Answer 4

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

}

Answer 5

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

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

使用JavaScript更改选择标记值

5 个答案: