在“選擇”控件中更改所選選項的“值”屬性

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輸入Say 4 ，然后在textbox 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);
});

DEMO

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

嘗試這個

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

要么

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

DEMO

Answer 5

您可以使用$（'＃id'）。val（）來設置選項的值。

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

小提琴鏈接