How can I generate a dynamic URL from a user's selected dynamic drop-down lists?

Question

I'm using JSON to create a dynamic drop-down list which consists of two lists. In addition, I have a third drop-down list, which is not dynamic.

When a user hits the Submit button, it should trigger a URL which is dynamically created, based on the selected values in the three drop-down lists.

For example, is a user chooses "Norway", "Oslo" and "All stars", a click on the Submit button should open up "norway_oslo_allstars.html"

Two of the drop down lists (the 1st and 3rd) have VALUE attributes in the OPTION tag, which I assume could be used for generating the dynamically created URL - but the 2nd drop down list is created from a JSON file, and hence the entries have no VALUE attribute.

Is there still a way to create the URL dynamically based on the user's choices?

Please see http://jazzkatt.net/dynamic/ for example.

---

Here is my dynamic drop-down and JSON code:

<script>

$(document).ready(function(){

    $("#json-one").change(function() {

        var $dropdown = $(this);

        $.getJSON("jsondata/data.json", function(data) {

            var key = $dropdown.val();
            var vals = [];

            switch(key) {
                case 'norway':
                    vals = data.norway.split(",");
                    break;
                case 'usa':
                    vals = data.usa.split(",");
                    break;
                case 'denmark':
                    vals = data.denmark.split(",");
            }

            var $jsontwo = $("#json-two");
            $jsontwo.empty();
            $.each(vals, function(index, value) {
                $jsontwo.append("<option>" + value + "</option>");
            });

        });
    });
    $("#json-one").trigger('change');
});
</script>

And here is my HTML with the two dynamic drop-down lists and the third (non-dynamic) drop-down list:

<form action="" method="get" id="form1">

<select id="json-one">
    <option selected value="norway">Norway</option>
    <option value="usa">USA</option>
    <option value="denmark">Denmark</option>
</select>

<br />

<select id="json-two">

</select>

<br />

<select id="stars">
<option value="allstars">All stars</option>
<option value="onestar">One star</option>
<option value="twostars">Two stars</option>
<option value="threestars">Three stars</option>
</select>

</form>
<p>

<button type="submit" form="form1" value="Submit">Submit</button>

Here is the JSON formatting I'm currently using… Is it possible to add some sort of VALUE attribute to each entry, which could be used for creating the URL?

{
    "norway": "Oslo,Bergen,Stavanger",
    "usa": "New York,Chicago,Dallas",
    "denmark": "Copenhagen,Aalborg,Odense"
}

Answer 1

First of all you can add VALUE to your second option json-two

You simply need to change your JS code where you are looping all the vals as follows.

$.each(vals, function(index, value) { $jsontwo.append("<option value='"+value+"'>" + value + "</option>"); });

Secondly, you do not need to do any changes to your script. You can generate the URL with the following script.

jQuery( "button[type='submit']" ).click(function(e) {
 e.preventDefault()
 var var1 = $('#json-one').val()
 var var2 = $('#json-two').val().toLowerCase().replace(/ /g,"")
 var var3 = $('#stars').val()

 var link = var1+"_"+var2+"_"+var3+".html"
 console.log(link)
});