Element by Name on load setting value

Question

Trying to get the page to load with default selected option 2

Well neither are working, what's correct?

My HTML is like this, no ID or class

$(window).load(function() {
  $("tour-adult[]").value = 3;
  document.getElementById("tour-adult[]").value = 4;
});

<div class="tourmaster-combobox-wrap">
  <select name="tour-adult[]">
    <option value="">Adult</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
</div>

Carl Edwards · Answer 1 · 2020-02-06T22:41:30.423

As far as your first attempt, try selecting the select element by it's name attribute and using jQuery's val() method to set the value:

$("select[name='tour-adult[]']").val(3);

You currently don't have an id assigned to the select. If you want to go native, you'd use something like querySelector:

document.querySelector("select[name='tour-adult[]']").value = 4;

$(window).on('load', function() {
  $("select[name='tour-adult[]']").val(3);
  
  console.log($("select[name='tour-adult[]']").val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tourmaster-combobox-wrap">
  <select name="tour-adult[]">
    <option value="">Adult</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
</div>

score 1 · Answer 2 · answered Feb 06 '20 at 22:37

1

Using jQuery:

Use .on('load', () {...} instead of .load() - Why?
Use an attribute selector like $("[attribute='attributeName']")
Pass the value as a String, not a Number

$(window).on('load', function() {
  $('select[name="tour-adult[]"]').val('3');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tourmaster-combobox-wrap">
  <select name="tour-adult[]">
    <option value="">Adult</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
</div>

answered Feb 06 '20 at 22:37

Shiny

4,945
3
17
33

Thanks that's working. however it created another problem in calculation.... when i test to select other value from interface the calculation takes the new value + 2 This is persons @ tour package so if i choose 3 after loading it will calculate 5 times – Coda Raafat Feb 06 '20 at 23:43
I'm afraid I don't follow what you mean - I don't know why something is being calculated here, input in `.val()` should match the `value` on your options – Shiny Feb 06 '20 at 23:44

score 0 · Answer 3 · answered Feb 06 '20 at 22:35

If you want to call it by ID, you will need to add an ID. I removed your jquery and added an ID and its working.

document.getElementById("tour-adult").value = 4;

<div class="tourmaster-combobox-wrap">
  <select id="tour-adult" name="tour-adult[]">
    <option value="">Adult</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
</div>

oh yea just edited the title, it's by name not by ID but same thing anyway you see it — Coda Raafat, Feb 06 '20 at 22:36

Element by Name on load setting value

3 Answers3