how to add options on click of own select box dynamically

Question

I want to create a select box dropdown. initially select box will not have any option, it should show only select. On click of select box it will iterate list and add each option to that select box.

I am trying below code -

$(".droptest").click(function(e){
e.preventDefault();

            var listDrop = [{"chdk74":"hdk73","hiphdk":"hiphdk","hpghdk":"hpghdk","ihdk":"ihdk","sdg74":"sdg74"}];
            var dropDownlist = JSON.parse(listDrop);
            var options = "";

            $.each(dropDownlist, function(key,value) {
                options += "<option name=" + value +" id=" + value +" value="+value+"> "+ value +" </option>";
            });
            $(".DomainDrop").html(options);
        });

<div class="droptest">

        <select class="DomainDrop tet" id="DomainDropCreate" name="DomainDrop" required>
            <option name="" value="">Select Domain</option>

        </select>
    </div>

Please see your browser console for your error message. JSON is a string representation of a javascript object. You have a javascript object, already, so you can't parse it. So it's failing at that step. — fdomn-m
– fdomn-m, Commented Nov 26, 2019 at 9:59

Carsten Løvbo Andersen · Accepted Answer · 2019-11-26 10:15:02Z

2

What you would do is to remove the [] from listDrop, and then use $.each(listDrop, function(key, value) {

Demo

$(".droptest").mousedown(function(e) {

  var listDrop = {
    "chdk74": "hdk73",
    "hiphdk": "hiphdk",
    "hpghdk": "hpghdk",
    "ihdk": "ihdk",
    "sdg74": "sdg74",
  };
  var options = "";

  $.each(listDrop, function(key, value) {
    options += "<option name=" + value + " id=" + value + " value=" + value + "> " + value + " </option>";
  });
  if ($(".DomainDrop option").length < 2) {
    $(".DomainDrop").html(options);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="droptest">

  <select class="DomainDrop tet" id="DomainDropCreate" name="DomainDrop" required>
    <option name="" value="">Select Domain</option>
  </select>
</div>

As Freedomn-m says, change click to mousedown and remove e.PreventDefault() then I all works just fine.

edited Nov 26, 2019 at 10:15

answered Nov 26, 2019 at 8:23

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

codegeek Over a year ago

hi, i checked. i is not selecting after click. like if i select any option it is showing ihdk74 that means first only.

codegeek Over a year ago

why list is not poping up on first click, on second click it is coming to select?

Carsten Løvbo Andersen Over a year ago

@codegeek Because when you click it the first time and the dropdown is already open before you populate it. Why don't you not just populate the select on page load?

fdomn-m Over a year ago

Change the first line to $("#DomainDropCreate").mousedown(function(e) { - the issue with click on the div is that it only gets there because it bubbled up from the select so the select click event has already happened. Mouse down on the select occurs before the click on the select so you can change the html/options before it is displayed. You might also prefer $("'id").one("mousedown", ... so it only reloads once.

Carsten Løvbo Andersen Over a year ago

@freedomn-m You are correct, I've also removed e.preventDefault() since that will not allow the dropdown to open.

|

Collectives™ on Stack Overflow

how to add options on click of own select box dynamically

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related