Question

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

Answer 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>

Answer 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>

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

2 个答案: