Question

如何在HTML中做一个可以输入的下拉框

Answer 1

HTML中做一个可以输入的下拉框，需要用户添加label标签设置我们的下拉菜单选项的内容相应的选项值，然后设置select标签，在select标签内部设置option选项标签，设置文本框，设置label标签，显示文本框的说明文字，然后添加textarea标签，内部设置我们文本框的相关属性即可。具体操作步骤如下。

1、添加label标签设置我们的下拉菜单选项的内容相应的选项值，然后设置select标签，在select标签内部设置option选项标签，这里需要几个选项就设置几个标签。如下图所示。

2、将下拉菜单需要显示的每一个内容设置在option标签中，如图所示，预览的设置效果，在网页中我们可以看到一个下拉菜单。如下图所示。

3、有时候下拉菜单也需要设置一个默认的值，如果大部分内容都是相同的，可以将它设置为默认值，只需要在它相应的属性中设置为选中状态。如下图所示。

4、再次预览我们的网页，可以看到刚才设置checked的选项已经默认显示在了设置的下拉菜单中选中状态。如下图所以。

5、设置文本框，设置label标签，显示文本框的说明文字，然后添加textarea标签，内部设置文本框的相关属性。如下图所示。

6、最后，可输入下拉框制作完成。如下图所示。

注意事项：

HTML中做一个可以输入的下拉框按照上述步骤操作即可制作完成。

Answer 2

东土小二 
来自电脑网络类芝麻团 2017-04-13

非常简单，可以用标签直接做，也可以用js手写一个，给你做了两个示范

写的是你麻痹啊！！！

Answer 3

非常简单，可以用标签直接做，也可以用js手写一个，给你做了两个示范
<select name="good3" id="rebata_money3" val="1">
<option name="good3" value="1">是否高佣金</option>
<option name="good3" value="2">是</option>
<option name="good3" value="3">否</option>
</select>
<style>
*{
margin: 0;
}
.out-box{
width: 90px;
border: 1px solid gainsboro;
height: 22px;
}
.out-box:hover{
border: 1px solid #86b6cc;
}
.select_box{
display: none;
border: 1px solid gainsboro;

}
.select_box span{
display: block;
}
.select_box span:hover{
display: block;
background: gainsboro;
}
</style>
<div class="out-box">
<p class="option-text"></p>
<div class="select_box">
<span val="0">是否高佣金</span>
<span val="1">是</span>
<span val="2">否</span>
</div>
</div>
<script>
$(document).ready(function(){
var opt = $(".select_box span:first-child").text();
$(".option-text").html(opt);
$(".option-text").click(function(){
$(".select_box").show();
});
$(".select_box span").click(function(){
$(".option-text").html($(this).text());
$(".select_box").hide();
});
});

</script>

Answer 4

引用东土小二的回答：
非常简单，可以用标签直接做，也可以用js手写一个，给你做了两个示范
<select name="good3" id="rebata_money3" val="1">
<option name="good3" value="1">是否高佣金</option>
<option name="good3" value="2">是</option>
<option name="good3" value="3">否</option>
</select>
<style>
*{
margin: 0;
}
.out-box{
width: 90px;
border: 1px solid gainsboro;
height: 22px;
}
.out-box:hover{
border: 1px solid #86b6cc;
}
.select_box{
display: none;
border: 1px solid gainsboro;

}
.select_box span{
display: block;
}
.select_box span:hover{
display: block;
background: gainsboro;
}
</style>
<div class="out-box">
<p class="option-text"></p>
<div class="select_box">
<span val="0">是否高佣金</span>
<span val="1">是</span>
<span val="2">否</span>
</div>
</div>
<script>
$(document).ready(function(){
var opt = $(".select_box span:first-child").text();
$(".option-text").html(opt);
$(".option-text").click(function(){
$(".select_box").show();
});
$(".select_box span").click(function(){
$(".option-text").html($(this).text());
$(".select_box").hide();
});
});

</script>

写的是你吗比啊