CODEWITHSUNDEEP
javascriptjqueryhtml
Michael Vakoč
Michael Vakoč

Reputation: 37

How to create hyperlink with pre-selected option in drop down list on the same page in pop up?

I am trying to get to work pre selecting an option in a pop up window. I've done my research on the internet and this is what I got so far but it doesn't work. I now always have option number one pre selected

Hyperlink triggering showing the pop up, where option two should be pre selected. 

<a href="?select=two" class="btn btn-red-2 show-modal" data-modal-id="order-form-modal">Order!</a>

Modal Window, which shows up and the option two should be pre selected.

<div id="order-form-modal" class="modal-window">
<select class="prettyform" name="select" id="select">
                            <option id="one" value="1" data-price="950">Nízke stojánky</option>
                            <option id="two" value="2" data-price="1790">Vysoké stojánky</option>
                            <option id="three" value="3" data-price="990">Set přenosné kruhy</option>
                            <option id="four" value="4" data-price="790">Přenosné kruhy</option>
                            <option id="five" value="5" data-price="490">Popruhy na kruhy</option>
                        </select>
</div>

JavaScript which should parse the parameter given in hyperlink at the beginning.

<script>
    $(document).ready(function() {
        var select = GetUrlParameter("select");
        $("#" + select).attr("selected", "");
    });

    function GetUrlParameter(name) {
            var value;
            $.each(window.location.search.slice(1).split("&"), function (i, kvp) {
                    var values = kvp.split("=");
                    if (name === values[0]) {
                            value = values[1] ? values[1] : values[0];
                            return false;
                    }
            });
            return value;
    }
</script>

Upvotes: 0

Views: 469

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337570

You need to set the selected property on the option to true:

var select = GetUrlParameter("select");
$("#" + select).prop("selected", true);

Example fiddle

Upvotes: 1

Related Questions