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

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

<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

Answer 2

我已将你的JSFiddle分叉到http://jsfiddle.net/pwdst/4ymtmf7b/1/，我希望你能做到这一点。

HTML -

<div class="ginput_container">
    <label for="input_1_4">Select option</label>
    <select class="medium gfield_select" id="input_1_4" name="input_4" 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>
      <div>
          <label class="hidden-label" for="input_1_4_other">Other value</label>
          <input class="holder" id="input_1_4_other" disabled="disabled" name="input_1_4_other" placeholder="None" type="text" />
     </div>
</div>

的JavaScript -

jQuery(".gfield_select").change(function() {
        var $this = jQuery(this);
        var val = $this.val();
        var holder = $this.parent().find('.holder');
        if (val === "*"){
            holder.val('');          
            holder.removeAttr('disabled');
            holder.focus();
        } else {           
            holder.val(this.options[this.selectedIndex].text);
            holder.attr('disabled', 'disabled');
        }
});

当＆＃34;输入值＆＃34;选择选项然后启用输入框，将值设置为空字符串，并将其聚焦。如果选择了另一个选项，则再次禁用文本输入，并使用选择列表中的文本值。

Answer 3

谢谢你们我想我找到了答案

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();
  jQuery(this).val("0"); // Change select value to None.
} else {
  x.find('.holder').val(x.find('option:selected').text());
  x.find('.holder').prop('disabled',true);
}

}）;

JS FIDDLE

下拉文本输入选项

3 个答案: