Выпадающий текстовый входной параметр

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

Спасибо, ребята Я думаю, я нашел свой ответ

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

Answer 2

Я думаю, что есть много плагинов, которые делают то, что вы хотите, но если вы хотите создать свои собственные, это базовое и простое решение. Вы можете создать 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 3

Я раздвоенный свой 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'); 
     } 
}); 

Когда опция «Введите значение» выбран, то поле ввода включен, значение устанавливается равным пустой строке, и она ориентирована. Если выбран другой параметр, то текстовый ввод снова отключается, и используется текстовое значение из списка выбора.