有没有办法在选择选项中显示输入框，以便我可以在选项中添加一个值？答案

【问题标题】：Is there a way to show input box in select options so i can add a value in option?有没有办法在选择选项中显示输入框，以便我可以在选项中添加一个值？
【发布时间】：2019-08-02 04:13:12
【问题描述】：

我有一个包含 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>

【问题讨论】：

您可以使用data 属性在option 中存储额外的值，并在更改选择选项时显示在输入字段中。
我想将该输入框放入选项中，以便用户可以添加自定义值@devsiOdedra
一次用户只能选择一个选项，所以一个输入就足够了，您可以在更改时清除输入。
但输入字段没有出现在选择框中，我希望它出现在那里。 @devsiOdeDra
查看stackoverflow.com/questions/5650457/…

标签： javascript php jquery html css

【解决方案1】：

您不能将输入字段放在选择框内。但这是你想做的尝试，我做了一个插件（不知何故）；

我使用了数据属性，我将它们放置在 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>

【讨论】：

【解决方案2】：

我认为下面的代码可以帮助你。

  <input type="text" name="shipping" list="shipping" placeholder="Select Shipping">
         
       <datalist name="shp" id="shipping" 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>
       </datalist>

【讨论】：