Is there a way to show input box in select options so i can add a value in option?

Question

I have a select list with 4 options and have to show text and input box both in the select option. like, click in select than input text box will show as options for the select box.

I tried some code but it's not worked. I want to show like this.

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

you can use `data` attribute to store extra value in `option` and on change of select option you can display in input field. — Devsi Odedra, Aug 02 '19 at 04:25
i want put that input box into option so a user can add custom values @devsiOdedra — Sohail Farooq, Aug 02 '19 at 04:28
at a time user can select only one option, so one input i enough for that, you can clear input on change. — Devsi Odedra, Aug 02 '19 at 04:30
but input field does not appear in select box i want ti appear it there. @devsiOdeDra — Sohail Farooq, Aug 02 '19 at 04:32
check this https://stackoverflow.com/questions/5650457/html-select-form-with-option-to-enter-custom-value — Ravi, Aug 02 '19 at 04:39
Inside native option tag you are not allowed to add child of body tag like input. You can use plugin that provide feature according to your requirement. — Jumper, Aug 02 '19 at 05:06

Jerdine Sabio · Answer 1 · 2019-08-02T06:55:17.550

You can't put an input field inside a select box. But here's an attempt with what you're trying to do, I made a plugin (somehow);

I utilized data-attributes, I had them placed inside divs so that whenever I click that option (or div), I will assign that data-attribute to the hidden input field.

$(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>

score 0 · Answer 2 · edited Aug 02 '19 at 05:22

I think following code help you.

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

Is there a way to show input box in select options so i can add a value in option?

2 Answers2