Problem in selecting a value in dropdown javascript?

Question

This is the drop-down.

<select
  id="identity.dvsSourceList.0.issuingState.value"
  name="identity.dvsSourceList.0.issuingState.value"
  class="native black-60"
  required=""
  data-invalid=""
>
  <option value="">Please select</option>
  <option value="ACT">ACT</option>
  <option value="NSW">NSW</option>
  <option value="NT">NT</option>
  <option value="QLD">QLD</option>
  <option value="SA">SA</option>
  <option value="TAS">TAS</option>
  <option value="VIC">VIC</option>
  <option value="WA">WA</option>
</select>

I tried executing this:

document.querySelector('identity.dvsSourceList.0.issuingState.value').value= "VIC";

But it gave this error:

VM252:1 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'identity.dvsSourceList.0.issuingState.value' is not a valid selector.
    at <anonymous>:1:10

Shakil Hossain · Accepted Answer · 2021-01-04 04:43:42Z

Selecting a value in dropdown javascript the problem with your id naming convention because you are using **.** You can use an attribute selector like this example:

    $("[id='identity.dvsSourceList.0.issuingState.value']").val("VIC");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
       <select
          id="identity.dvsSourceList.0.issuingState.value"
          name="identity.dvsSourceList.0.issuingState.value"
          class="native black-60"
          required=""
          data-invalid=""
        >
          <option value="">Please select</option>
          <option value="ACT">ACT</option>
          <option value="NSW">NSW</option>
          <option value="NT">NT</option>
          <option value="QLD">QLD</option>
          <option value="SA">SA</option>
          <option value="TAS">TAS</option>
          <option value="VIC">VIC</option>
          <option value="WA">WA</option>
        </select>

Unmitigated · Accepted Answer · 2021-01-04 04:03:23Z

You need # to select based on id, and you will need backslashes to escape the dots, preventing them from being interpreted as class names. However, you should really consider using less complicated ids without any special characters.

document.querySelector('#identity\\.dvsSourceList\\.0\\.issuingState\\.value').value= "VIC";

<select
  id="identity.dvsSourceList.0.issuingState.value"
  name="identity.dvsSourceList.0.issuingState.value"
  class="native black-60"
  required=""
  data-invalid=""
>
  <option value="">Please select</option>
  <option value="ACT">ACT</option>
  <option value="NSW">NSW</option>
  <option value="NT">NT</option>
  <option value="QLD">QLD</option>
  <option value="SA">SA</option>
  <option value="TAS">TAS</option>
  <option value="VIC">VIC</option>
  <option value="WA">WA</option>
</select>

KienHT · Accepted Answer · 2021-01-04 04:05:02Z

1

Try this:

document.querySelector('#identity\\.dvsSourceList\\.0\\.issuingState\\.value').value= "VIC"

Use prefix # with the an id and . with a class when using querySelector. Another thing is, in order to select an HTML element by ID that contains dots, you need to escape it using double slash \\.

answered Jan 4, 2021 at 4:05

KienHT

1,36412 silver badges11 bronze badges

Collectives™ on Stack Overflow

Problem in selecting a value in dropdown javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related