Default value before change function

Question

I have a simple drop down list with values. On change, the value is passed to a variable place

The place value is passed to a div, which loads data from an api. It works fines after I select one of the values, but my initial value is blank.

How can I store a default value before the select list is clicked?

<select name="places">
  <option value="135264023">New York</option>
  <option value="116721348">Los Angeles</option>
  <option value="104279908">Dubai</option>
</select>

<div id="widget"></div>

<script>
$('select').change(function() {
  var place = $(this).val();
  console.log(place);
  // This call have to happen after div and <script> tag.
  widgetOptions({
    element: 'widget',
    placeId: place,
  });
});
</script>

`` or `document.querySelector('[name="places"]').selectedIndex = 0;` — A1rPun, Sep 18 '15 at 11:57
possible duplicate of [How can I set the default value for an HTML — Hacketo, Sep 18 '15 at 11:59

score 3 · Accepted Answer · answered Sep 18 '15 at 12:00

You can set an option to be the default by adding the selected boolean attribute to it, but my guess is that your real question is how to trigger loading the information at the outset.

Add the selected (although it's very likely to have already defaulted to the first one):

<select name="places">
  <option value="135264023" selected>New York</option><!-- Note change -->
  <option value="116721348">Los Angeles</option>
  <option value="104279908">Dubai</option>
</select>

...and then in your script:

var sel = $("select"); // You probably want this to be more specific
setupPlace(sel.val());
sel.change(function() {
  setupPlace($(this).val());
});
function setupPlace(place) {
  console.log(place);
  // This call have to happen after div and <script> tag.
  widgetOptions({
    element: 'widget',
    placeId: place,
  });
}

Note how we've isolated the logic into a function, and then we call that function from the two places we need it: Initialization, and change.

Alternately, you see people doing this kind of thing (still with that selected attribute):

$('select').change(function() {
  var place = $(this).val();
  console.log(place);
  // This call have to happen after div and <script> tag.
  widgetOptions({
    element: 'widget',
    placeId: place,
  });
}).trigger("change"); // <== Only change is here

I'm not a fan of using a fake event to trigger a handler, but I can see the allure. It's largely a style choice.

You read my mind, my question was a bit vage. I was looking for how to trigger the first value without clicking. This worked like a charm! — Filip Blaauw, Sep 18 '15 at 12:05

score -1 · Answer 2 · answered Sep 18 '15 at 12:01

var place = null;
$('select').click(function() {
 if(place === null) {
  place = $(this).val();  
 }
});

$('select').change(function() {
  //place = $(this).val();
  console.log(place);
  // This call have to happen after div and <script> tag.
  widgetOptions({
    element: 'widget',
    placeId: place,
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="places">
  <option value="135264023">New York</option>
  <option value="116721348">Los Angeles</option>
  <option value="104279908">Dubai</option>
</select>

<div id="widget"></div>

Default value before change function

2 Answers2