CODEWITHSUNDEEP
jquery
DCI STUDIOS LTD
DCI STUDIOS LTD

Reputation: 37

how to add ' selected="selected" ' to a option form by getting the value from a url

I have the following url

search.php?card=Xcel&cat=1

and the following in my search form 

    <div class="icard" > 
      <select name="card" id="card">
        <option value="Xplore">Xplore card</option>
        <option value="Xpand">Xpand card</option>
        <option value="Xcel">Xcel card</option>
      </select>
    </div>
    <div class="icat" >
      <select name="cat" id="cat">
        <option value="1">Health</option>
        <option value="3">Fitness</option>
        <option value="2">Travel & Leisure</option>
        <option value="4">Wellness & Spa</option>
        <option value="5">Security & Techology</option>
        <option value="6">Others</option>
      </select>
    </div>

Using jquery, based on the value in the url

?card=Xcel

, i would like to add selected ="selected" to the 3rd option, so it is now becomes <option value="Xcel" selected ="selected">Xcel card</option>

I have tried the following without any success

var val = location.href.match(/[?&]card=(.*?)[$&]/)[1];  
$('#card').val(val);

Any help would be greatly appreciated

Upvotes: 1

Views: 51

Answers (3)

Pedram
Pedram

Reputation: 16575

You can get query value with this function in a right way, location.href.match may be mistaken:

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

And get card value:

var query = getParameterByName('card');

Then check if query equal to options:

$('#card').change(function(){
  if($(this).val() == query){
alert('its equal to query');
  }
});

JSFiddle

OR check option equal to query:

$("#card option").each(function(){
  if ($(this).val() == query) {
    $(this).attr('selected', 'selected');
  }
});

JSFiddle

OR

$('#card option[value="'+query+'"]').attr('selected','selected');

JSFiddle

Upvotes: 1

Jaydip Shingala
Jaydip Shingala

Reputation: 429

Use the below code to get selected option passed in the url: 

<script>
    function findvalue(key) {
        key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
        var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
        return match && decodeURIComponent(match[1].replace(/\+/g, " "));
    }
    $("#card option[value='" + findvalue("card") + "']").attr("selected", "selected");
    $("#cat option[value='" + findvalue("cat") + "']").attr("selected", "selected");
</script>

Upvotes: 0

Ali
Ali

Reputation: 1383

You can use below code

var q = "?card=Xcel";

var val = q.match(/card=([^']+)/)[1];


$("#card").val(val)

$("#card [value='" + val +"']").attr('selected', 'selected')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icard" > 
      <select name="card" id="card">
        <option value="Xplore">Xplore card</option>
        <option value="Xpand">Xpand card</option>
        <option value="Xcel">Xcel card</option>
      </select>
    </div>
    <div class="icat" >
      <select name="cat" id="cat">
        <option value="1">Health</option>
        <option value="3">Fitness</option>
        <option value="2">Travel & Leisure</option>
        <option value="4">Wellness & Spa</option>
        <option value="5">Security & Techology</option>
        <option value="6">Others</option>
      </select>
    </div>

Upvotes: 0

Related Questions