下拉文本输入选项

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

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

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

如果我再次点击输入值的选项但它不会正常工作。

来源

2014-08-30 subas_poudel

到目前为止试过什么？ – 2014-08-30 07:57:00

尝试了不同的插件，但不完全是我想要的。我试图自己做这个 http://jsfiddle.net/wTumv/1/ – 2014-08-30 08:02:00

你在实施这个过程中遇到了什么问题，特别是你需要什么帮助？你能向我们展示你迄今为止尝试过的任何代码吗？ StackOverflow不存在作为调试工作的方法 - 但是需要来自具有特定编程问题的专家的帮助。 – pwdst 2014-08-30 08:05:24

谢谢你们我想我已经找到我的答案

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

来源

2014-08-30 08:47:04

@David Thomas谢谢 – 2014-08-30 09:07:55

我认为有很多插件可以做你想做的，但如果你想创建自己的插件，这是一个基本和简单的解决方案。您可以创建一个select与display:none一个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

来源

2014-08-30 08:06:31 Moshtaf

如果你喜欢隐藏'select'然后'show'文本框，所以检查这个提琴太：http://jsfiddle.net/qw91fqg5（这是不同的答案的演示） – Moshtaf 2014-08-30 08:21:31

谢谢，但它是不可重复使用的。我不希望选择消失。 – 2014-08-30 08:24:14

我做了这个 http://jsfiddle.net/wTumv/1/几乎相同的逻辑作为你的但唯一的问题是我不能够再次集中文本框，如果我输入选择一个值 – 2014-08-30 08:27:30

我已付出你的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'); 
     } 
});

当选择“输入值”选项，然后启用输入框，值设置为空字符串，它集中。如果选择了其他选项，则文本输入将再次禁用，并使用选择列表中的文本值。

来源

2014-08-30 08:34:24 pwdst

感谢您的帮助。我想要这样的东西 http://jsfiddle.net/wTumv/5/ – 2014-08-30 08:47:57

下拉文本输入选项

回答

相关问题