下拉文本輸入選項

我想要一個下拉元素，用戶可以從可用選項中進行選擇，或者選擇輸入值選項，從而允許輸入值。我特別希望用戶只有在選擇「輸入值」選項時才能輸入值。下拉文本輸入選項

這是我到目前爲止嘗試過的。

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

下拉文本輸入選項

回答

相關問題