텍스트 입력 옵션 드롭

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 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와 : 당신은 select이 같은 display:none와 textbox를 만들 수 있습니다

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

Check JSFiddle Demo

Answer 3

은 내가 희망 http://jsfiddle.net/pwdst/4ymtmf7b/1/에 JSFiddle를 포크했다 당신이 달성하기를 원하는 것입니다.

, 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'); 
     } 
}); 

, 빈 문자열로 설정 값, 그것은 초점을 맞추고 있습니다. 다른 옵션을 선택하면 텍스트 입력이 다시 사용 불가능하게되고 선택 목록의 텍스트 값이 사용됩니다.