JQuery Dynamic Combobox

Question

Why within JQuery, the combobox add method doesn't seem to be recognized as with traditional html combobox here:

http://viralpatel.net/blogs/demo/dynamic-combobox-listbox-dropdown-in-javascript.html

I for one don't understand this question. What combobox add method? — Dominic Rodger
– Dominic Rodger, Commented Mar 2, 2010 at 15:27
Do you mean if you were to use a jQuery selector to get the combo reference rather than using document.getElementById why doesn't .add work?.. if that is the case it's because the selector returns a reference to a jQuery object instead of the element itself. — Quintin Robinson
– Quintin Robinson, Commented Mar 2, 2010 at 15:30
A select element is not a combobox. A combobox is a text box combined (hence the name) with a drop down menu. Are you talking about a jQuery plugin that simulates a real combobox? — Quentin
– Quentin, Commented Mar 2, 2010 at 15:31

Nick Craver · Accepted Answer · 2010-03-02 15:32:12Z

5

To get the actual DOM element in jQuery to call DOM methods on, use .get():

$("#myDropDown").get(0).add(option);

Please note though, there's another way to do this in jQuery:

$('#myDropDown').append($('<option></option>').val(myVal).html(optionText));

There's also the Select Box plugin if you're doing a lot more with selects.

answered Mar 2, 2010 at 15:32

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

1 Comment

Jeach Over a year ago

The later solution is the one which works on all browsers, plus IE (which doesn't like the 'new Option(value,text)' way)... thanks!

EvilProgJunior · Accepted Answer · 2011-07-01 15:02:23Z

1

function MyFunction(myOption)
{
   $("#cbx").attr("innerHTML",myOption);
}

myOption should look something like this:

var myOption = "<option>" + whatever you want + "</option>";

I would ussually create my own Methods so I can Simply call e.g AddDoc(doc);
Even $("#myDropDown").get(0).add(option); feels too long for me.
Id do something like InsertOption(cbx,Option);
This is just an alternative way ^^.

function InsertOption(cbx,option)
{
   $("#"+cbx).attr("innerHTML",option);
}

function AppendOption(cbx,option)
{
   var opt = $("#"+cbx).attr("innerHTML");
   opt += option;
   $("#"+cbx).attr("innerHTML",opt);
}

Sorry if I made any mistakes ^^... junior prog ere :D

answered Jul 1, 2011 at 15:02

EvilProgJunior

72 bronze badges

Comments

Simon · Accepted Answer · 2012-05-21 18:04:40Z

If suppose we have 2 combo boxes

state
cities

When you select the state combo box then according to that value it will add items into cities combo box:

 $(document).ready(function () {

        $("#DropDownList1").change(function () {

            if ($("#DropDownList1 option:selected").text() == "Please Select") {
                $("select[id$=DropDownList2] > option").remove();
            }

            if ($("#DropDownList1 option:selected").text() == "Andhra Pradesh") {
                $("select[id$=DropDownList2] > option").remove();
                $("#DropDownList2").append($("<option>" + ("Hyderabad") + "</option>"));
                $("#DropDownList2").append($("<option>" + ("Vijayawada") + "</option>"));
                $("#DropDownList2").append($("<option>" + ("Karimnagar") + "</option>"));
            }
            if ($("#DropDownList1 option:selected").text() == "Tamilnadu") {
                $("select[id$=DropDownList2] > option").remove();
                $("#DropDownList2").append($("<option>" + ("Madhurai") + "</option>"));
                $("#DropDownList2").append($("<option>" + ("Chennai") + "</option>"));
            }
            if ($("#DropDownList1 option:selected").text() == "Karnataka") {
                $("select[id$=DropDownList2] > option").remove();
                $("#DropDownList2").append($("<option>" + ("Bangalore") + "</option>"));
            }

        });
    });

Collectives™ on Stack Overflow

JQuery Dynamic Combobox

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related