CODEWITHSUNDEEP
javascripthtmlhtml-select
Phillip
Phillip

Reputation: 457

Limit server populated HTML dropdown list (w/ JavaScript)

I am wanting to try to change or limit a drop down list using JavaScript, or some other solution. Unfortunately, I have no control over the way the HTML comes out that I am trying to change client side. The drop down list is generated server side, but we would like to give the user additional options to further limit the choices in the drop down list.

We can't edit what is generated, but we can insert HTML.

One suggested solution, which may not be possible, is to use JavaScript to limit the dropdown list. For example, the drop down follows the format of:

<SELECT ID="dropdown_1">
<OPTION VALUE=""    >None
<OPTION VALUE="1000">AB-ITEM 1 DESCRIPTION
<OPTION VALUE="2001">AB-ITEM 2 DESCRIPTION
<OPTION VALUE="50"  >AB-ITEM 8 DESCRIPTION
<OPTION VALUE="70"  >BB-ITEM 3 DESCRIPTION
<OPTION VALUE="100" >BB-ITEM 5 DESCRIPTION
<OPTION VALUE="2"   >ABB-ITEM 4 DESCRIPTION
</SELECT>

What I want to limit by the beginning of the text, so AB-, BB-, or ABB- in this case. The value has no rhyme or reason, it's just an index number. I don't think this is possible since this is just text, and not associated with an attribute.

One thought would be to be to:

However, I'm not sure if this is possible, and if it is, what would be needed to create such code. Any help or references to functions or examples would be greatly appreciated.

Upvotes: 1

Views: 1041

Answers (2)

Phillip
Phillip

Reputation: 457

Thanks to BinaryTox1n, I was put on a good path to find an all-browser compatible solution to my question. However, it is a slightly different approach pieced together from other solutions on StackOverFlow.

The difference comes is how one deals with the OPTIONs. Though .hide() works on some browsers, it is not compatible with IE8 (and maybe some others). Alternatives and variations to .hide() also failed. Another problem with .hide() is that you also need to use .disable(). The last problem is that if you have several (20 or so) options and only 2 or 3 are visible, Chrome (and perhaps other browsers) do not render the dropdown box properly.

The best approach found is to .remove() unwanted options. No compatibility issues because the OPTION is simply removed. However, I also want to have the flexibility to add back options if needed. So the following is a version of what I'll be using:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var regex_str = "^AAB-";
    var dd1 = $("#dropdown1 option");

  //Clone the 'None', Current, and All options into respective variables.
  //All options are stored in order to allow different selection criteria
    var all_Opt  = dd1.clone(true);
    var none_Opt = dd1.filter(":contains(None)").clone(true);
    var cur_Opt  = dd1.filter(function(){
        return $(this).text().match(regex_str);
    }).clone(true);

  //Remove all options and replace the 'None' and Current options
    dd1.remove();
    noneOpt.appendTo($("#dropdown1"));
    curOpt.appendTo($("#dropdown1"));
});
</script>

The only thing I'd like to add is the ability for this to change using a different drop down box or some other trigger.

Upvotes: 0

BinaryTox1n
BinaryTox1n

Reputation: 3566

Anything is possible (with jQuery):

$(document).ready(function() {
    $("#dropdown_1 option").hide();
    $("#dropdown_1 option").filter(":contains(TYPE-X)").show();
});

An advantage with this is that all of the options are still there, you just can't see them. So all it would take to return to the default list would be a call to:

$("#dropdown_1 option").show();

Edit for regex:

$(document).ready(function() {
    $("#dropdown_1 option").hide();
    $("#dropdown_1 option").filter(function() {
        return $(this).text().match(/^AB-/);
    }).show();
});

You can filter your list using a regex like seen above.

Edit: A note about jQuery, this in the filter function is the DOM element itself. In order to access the jQuery helper method text(), I first need to wrap that DOM element with the jQuery function, as edited above.

Upvotes: 2

Related Questions