Make select option value case insensitive / have multiple values

Question

My form gets prepopulated onload with values from querystring. In the query, when country=Australia, "Australia" gets selected. But when country=AUSTRALIA or country=australia, nothing gets selected.

My select field:

<select id="country" name="country" style="border: 1px solid rgb(204, 204, 204); font-family: Arial,Helvetica,sans-serif; font-size: 9pt; width: 150px;">
    <option value="" selected="selected">Please select country</option>
    <option value="Australia">Australia</option>
    <option value="Austria">Austria</option>
</select>

I guess <option value="Australia, AUSTRALIA, australia"> would make it work. How do I get this done? Would this (Can an Option in a Select tag carry multiple values?) be an option?

Otherwise, how could I make the select field case insensitive for pre-population with querystring values?

JS for querystring added:

function populate(form) {
    if (location.search == null || location.search.length < 1) return; // no querystring
    var pairs = location.search.substring(1).split("+");
    for (var p = 0; p < pairs.length; ++p) {
        var pair = pairs[p].split("=");
        var name = pair[0];
        var value = unescape(pair[1].replace(/\+/g, " "));
        var fld = form.elements[name];
        var ftype = null;
        var farray = false;
        var atype = Array;
        if (fld != null) {
            if (fld.length != null && fld.length >= 1 && fld[0].type != null && fld[0].type != undefined) {
                ftype = fld[0].type;
                farray = true;
            } else {
                ftype = fld.type;
            }
        }
        switch (ftype) {
        case "text":
        case "hidden":
        case "textarea":
            if (farray) fld = fld[0]; // only handle first-named for this type
            fld.value = value;
            break;
        case "select-one":
        case "select-multiple":
            if (farray) fld = fld[0]; // only handle first-named for this type
            for (var o = 0; o < fld.options.length; ++o) {
                var opt = fld.options[o];
                var oval = opt.value;
                if (oval == null || oval == "") oval = opt.text;
                if (oval == value) {
                    opt.selected = true;
                    break;
                }
            }
            break;
        case "checkbox":
        case "radio":
            if (!farray) {
                // single checbox or radio of that name:
                fld.checked = true;
            } else {
                for (var cr = 0; cr < fld.length; ++cr) {
                    if (fld[cr].value == value) {
                        fld[cr].checked = true;
                        break;
                    }
                }
            }
            break;
        default:
            alert("Unknown field type encountered for field " + name + ": " + ftype);
            break;
        } // end of switch
    } // end of loop on fields from qs
}

Show your code where you're prepopulating based on the query string — Ian, Apr 26 '13 at 17:56
From the somewhat vague information, It seems like you've potentially got an XSS entry point there, if you're just outputting the information directly from QS into the source, without doing any pre-processing on it (otherwise you'd already be turning it into an known value for your dropdown). — Psytronic, Apr 26 '13 at 19:07
Sorry for the vagueness of my original post. First-timer here! So, @psytronic, you're saying I should add stuff to pre-process what comes from the query? — pedroargenti, Apr 27 '13 at 08:47

Ian · Accepted Answer · 2013-04-27T18:11:10.753

3

When you're prepopulating (I'm guessing you compare values in a for loop), compare values with .toLowerCase(). For example:

if (querystringValue.toLowerCase() === optionValue.toLowerCase()) {
    // Select this option
    break;
}

UPDATE:

For your updated code, I think it would be here:

if (oval == value) {
    opt.selected = true;
    break;
}

So change it to:

if (oval.toLowerCase() === value.toLowerCase()) {
    opt.selected = true;
    break;
}

Depending on if this applies, you might want to do the same to your checkbox/radio button setting:

if (fld[cr].value == value) {

But that's really up to you.

edited Apr 27 '13 at 18:11

answered Apr 26 '13 at 17:56

Ian

50,146
13
101
111

So it´s better to change the way I prepopulate instead of adding multiple values. Interesting! I added my code to prepopulate. Could you help me position this condition? – pedroargenti Apr 27 '13 at 12:45
@pedroargenti the part you need to change is `if (oval == value) {` to `if (oval.toLowerCase() == value.toLowerCase()) {` – Gabriele Petrioli Apr 27 '13 at 18:11
1

@GabyakaG.Petrioli Haha thanks, I literally got your comment as I was editing my answer to explain that (after I re-formatted the OP's code so I could read/find it) :) – Ian Apr 27 '13 at 18:11
https://tom-select.js.org/examples/create-filter/ var unique = new TomSelect('#select-words-unique',{ create: true, createFilter: function(input) { input = input.toLowerCase(); return !(input in this.options); } }); – Sparkz Nov 27 '21 at 04:15

Make select option value case insensitive / have multiple values

1 Answers1