javascript - 下拉文本输入选项

Question

我想要一个下拉元素，用户可以从可用选项中进行选择，或者选择输入值选项，从而允许输入值。我特别希望用户仅在选择“输入值”选项时才能输入值。

这是我到目前为止所尝试过的。

HTML-

<div class="ginput_container">
    <select name="input_4" id="input_1_4" class="medium gfield_select" tabindex="15">
       <option value="0">None</option>
       <option value="155">1-70</option>
       <option value="185">71-250</option>
       <option value="*">Enter value</option>
    </select>
    <input type="text" value="None" class="holder" >
</div>

JavaScript-

jQuery(".gfield_select").change(function() {
        var val = jQuery(this).val();
        var enter = jQuery(this).parent().find('option:selected').text();
        var x = jQuery(this).parent();
        if (enter ==="Enter a value" || enter === "Enter value"){
          var holder = x.find('.holder');
          holder.val('');          
          holder.prop('disabled',false);
          holder.focus();
        } else {
          x.find('.holder').val(x.find('option:selected').text());
        }
});

JS fiddle

但是，如果我再次单击输入值选项，它将无法正常工作。

Answer 1

我认为有很多插件可以满足您的需求，但如果您想创建自己的插件，这是一个基本且简单的解决方案。您可以使用 display:none 创建一个 select 和一个 textbox，如下所示:

<select id="ddlDropDownList">
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
    <option value="-1">Enter Value</option>
</select>
<input id="txtTextBox" type="text" />

<style>
    #txtTextBox{
        display:none;
    }
</style>

然后尝试这个 JQuery:

$("#ddlDropDownList").change(function(){
    if($(this).val() == '-1'){
        $("#txtTextBox").fadeIn();
    }else{
        $("#txtTextBox").fadeOut();
    }
});

<强> Check JSFiddle Demo