我有一个包含 4 个选项的选择列表，并且必须在选择选项中同时显示文本和输入框。例如，单击选择比输入文本框将显示为选择框的选项。
我尝试了一些代码，但没有用。我想这样展示。
<select name="shp" style=" width:170px; font-family:Verdana, Arial, Helvetica, sans-serif; font size:9px; color:#666666; z-index:50" >
<option>Select Shipping</option>
<option value="hc=11.00 s1=5.50 s2=5.50">UK and European Union: Delivery with Tracking and Insurance - 2/3 days - EUR <input type="text" /> - (then 5.50 for each additional object in the parcel)</option>
<option value="hc=13.00 s1=6.50 s2=6.50">United States and Canada: Delivery with Tracking and Insurance - 3/4 days - EUR <!--AMT--> - (then 6.50 for each additional object in the parcel)</option>
<option value="hc=18.00 s1=7.50 s2=7.50">Rest of the World: Delivery with Tracking and Insurance - 4/10 days - EUR <!--AMT--> - (then 7.50 for each additional object in the parcel)</option>
<option value="s1=0.00 s2=0.00">Free Delivery (Priority Mail without Tracking, without Insurance and without guaranteed shipping times) EUR 0.00</option>
</select>最佳答案
您不能将输入字段放在选择框中。但这是您尝试做的尝试，我制作了一个插件(以某种方式)；
我利用数据属性，将它们放在 div 中，这样每当我单击该选项(或 div)时，我都会将该数据属性分配给隐藏的输入字段。
$(document).ready(function() {
// show options
$(".select-field").click(function() {
$(".select-options").show();
});
// handle option click
$(".select-option").click(function() {
$(this).addClass("clicked");
$("#shp").val($(this).data("value"));
$(".select-field").html($(this).data("area"));
$(".select-option").not(this).each(function() {
$(this).removeClass("clicked");
});
});
// get shp value
$(".getSelectValue").click(function() {
alert($("#shp").val());
});
// hide options
$(window).click(function(e) {
if ($(e.target).hasClass("select-option") || $(e.target).hasClass("select-input")) {
} else {
if (!$(e.target).hasClass("select-field")) {
$(".select-options").css("display", "none");
}
}
});
});.select-container {}
.select-container .select-field {
display: inline-block;
padding: 3px 20px;
border-radius: 3px;
border: 1px solid rgb(180, 180, 180);
transition: 0.2s;
cursor: pointer;
}
.select-container .select-field:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.select-container .select-options {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: white;
display: none;
border-radius: 3px;
border: 1px solid rgb(180, 180, 180);
transition: 0.1s;
width: 60%;
cursor: pointer;
}
.select-container .select-options div {
padding: 4px 6px;
border-bottom: 1px solid rgb(180, 180, 180);
transition: 0.2s;
}
.select-container .select-options div:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.select-container .select-options div:last-of-type {
border-bottom: none !important;
}
.select-container .select-options .clicked {
background-color: rgba(60, 150, 210) !important;
color: white;
}<html>
<body>
<div class="select-container">
<div class="select-field">
Choose
</div>
<div class="select-options">
<input id="shp" name="shp" hidden/>
<div class="select-option" data-area="UK and European Union" data-value="hc=11.00 s1=5.50 s2=5.50">UK and European Union: Delivery with Tracking and Insurance - 2/3 days - EUR <input class="select-input" type="text" /> - (then 5.50 for each additional object in the parcel)</div>
<div class="select-option" data-value="hc=13.00 s1=6.50 s2=6.50" data-area="United States and Canada">United States and Canada: Delivery with Tracking and Insurance - 3/4 days - EUR
<!--AMT-->- (then 6.50 for each additional object in the parcel)</div>
<div class="select-option" data-value="hc=18.00 s1=7.50 s2=7.50" data-area="Rest of the World">Rest of the World: Delivery with Tracking and Insurance - 4/10 days - EUR
<!--AMT-->- (then 7.50 for each additional object in the parcel)</div>
<div class="select-option" data-value="s1=0.00 s2=0.00" data-area="Free Delivery">Free Delivery (Priority Mail without Tracking, without Insurance and without guaranteed shipping times) EUR 0.00</div>
</div>
</div>
<br>
<button class="getSelectValue">Get Select Value</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>关于javascript - 有没有办法在选择选项中显示输入框，以便我可以在选项中添加一个值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57319845/