0

I am really new to javascript and jquery. I would like to set a value of the dropdown form a value passed in the url

The possible values of the dropdown are

Large Van - Sameday
Extra Large Van - Sameday

In jquery this is what i am trying 

var vehicle = querystring('Vehicle');
            if (vehicle != 'undefined' && vehicle != "") {

                var vehicleRqd = decodeURI(vehicle) + " - Sameday";

                $("[id$='ddlVehicleType']").find('option:contains(' + vehicleRqd + ')').attr("selected", true);

            }

When the vehicle in the url parameter is Large Van - Sameday the value is getting set to Extra Large Van - Sameday. I am assuming it could be to do with similar text (Large Van). Can anyone help, i am really new to Jquery and javascript.

Visual Vincent
  • 18,045
  • 5
  • 28
  • 75
Abe
  • 1,879
  • 2
  • 24
  • 39
  • 1
    Possible duplicate of [Select element by exact match of its content](https://stackoverflow.com/questions/15364298/select-element-by-exact-match-of-its-content) – Visual Vincent Jan 11 '19 at 17:24
  • If you want to match the exact contents of the `option` element you cannot use `find()`. Instead there's the [`filter()` function](http://api.jquery.com/filter/). The duplicate has more info about it. – Visual Vincent Jan 11 '19 at 17:26
  • Please clarify: you have no problem getting values from the URL, it's just an issue selecting the values in the `select`? Your question as worded will invoke answers regarding getting values from the url. – freedomn-m Jan 11 '19 at 17:39
  • Please also clarify your `select` HTML (just the `select`) - ie whether you have the `value`s set to the same as the text or not. – freedomn-m Jan 11 '19 at 17:41

2 Answers2

0

You can use URLSearchParams class to get query string values from the url very easily. Once you've got the value, just set the value of the element. You don't need any external libraries (like jquery) to accomplish this.

<select id="nameEl">
  <option value="andy">Andy</option>
  <option value="bob">Bob</option>
</select>

// Example URL http://something.com?name=bob

const getValueFromUrl = (key) => {
    const search = new URLSearchParams(window.location.search);
  const value = search.get(key);
  return value;
}

const name = getValueFromUrl('name');
document.getElementById('nameEl').value = name;
mwilson
  • 12,295
  • 7
  • 55
  • 95
0

Search option by value, not string contains it. Because both Large Van and Extra Large Van contains Large Van

var vehicle = 'Large Van';
if (vehicle != 'undefined' && vehicle != "") {

  var vehicleRqd = vehicle + " - Sameday";
  $("#select option[value='"+ vehicleRqd + "']").attr("selected", true);

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='select'>
  <option></option>
  <option value="Large Van - Sameday">Large Van - Sameday</option>
  <option value="Extra Large Van - Sameday">Extra Large Van - Sameday</option>
</select>
aseferov
  • 6,155
  • 3
  • 17
  • 24