更改控件中所选选项的"value"属性"Select"

Question

我正在尝试实现以下结果：

有一个<select>控件。下面是一个textbox。我想将此文本框中输入的值分配给 <select> 控件中特定option的 value 属性。

例如：-比如说，以下是<select>下拉列表：-

<select id="anyid">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="custom">Custom</option>
</select>

假设在textbox中输入4，然后在文本框的onkeyup，我希望Custom选项的value属性4。因此，在此之后，<select>选项将是：-

<select id="anyid">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">Custom</option>
</select>

有什么想法吗？我更喜欢jQuery而不是Javascript。

Answer 1

您应该为

custom选项分配一个类/ID。

<option class="customOption" value="custom">Custom</option>

然后你可以做：

$('#myTextBox').on('keyup', function () {
    $('.customOption').val(this.value);
});

演示

Answer 2

$(document).ready(function(){
     $("textbox").keyup(function(){
         var newValue =        $(this).val();
         $("option").each(function(){
             if($(this).html() == "Custom")
             {
                $(this).val(newValue);
             }    
         });
    });
});

请尝试上面的代码。

Answer 3

<select id="anyid">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="custom">Custom</option>
</select>
<input type="text" onkeyup="fillCustomValue(this)"/>
<script>
    function fillCustomValue(elem) {
        document.getElementById('anyid').options[document.getElementById('anyid').options.length - 1].value = elem.value;
        document.getElementById('anyid').options[document.getElementById('anyid').options.length - 1].innerHTML = elem.value;
    }
</script>

试试这个没有jQuery的

Answer 4

您可以使用 $（'#id'）.val（） 来设置选项的值。

$(document).ready(function () {   
    $("#myInput").keyup(function () {
        $('#custom').val($("#myInput").val());
        alert($('#custom').val());
    });
}

小提琴链接

Answer 5

试试这个

$('#va').keyup(function(){
    $('#anyid option[value=custom]').attr('value',$(this).val()) 
});

或

$('#va').keyup(function(){
        $('#customIDofUrOption').attr('value',$(this).val()) 
    });

演示