我想要一个下拉元素,用户可以从可用选项中进行选择,或者选择输入值选项,从而允许输入值。 我特别希望用户仅在选择“输入值”选项时才能输入值。
这是我到目前为止所尝试过的。
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());
}
});
但是,如果我再次单击输入值选项,它将无法正常工作。
最佳答案
我认为有很多插件可以满足您的需求,但如果您想创建自己的插件,这是一个基本且简单的解决方案。
您可以使用 display:none
创建一个 select
和一个 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();
}
});
关于javascript - 下拉文本输入选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25580273/