Web Analytics Made Easy -
StatCounter How can I change and populate new values into the drop down list with JavaScript? - CodingForum

Announcement

Collapse
No announcement yet.

How can I change and populate new values into the drop down list with JavaScript?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How can I change and populate new values into the drop down list with JavaScript?

    I have the below drop down list. It does not have the select id just the select name. How can I change and populate new values into the drop down list with JavaScript?
    Jquery is fine also. I am not able to change the below HTML code, I can only add Javascript, Jquery, or css.


    Code:
    <select name="Field6066273"  size="1" >
    <option value="">-- please make a selection --</option>
    <option value="Filet Mignon" >Filet Mignon</option>
    <option value="Stuffed Chicken" >Stuffed Chicken</option>
    <option value="Leek Crusted Salmon" >Leek Crusted Salmon</option>
    <option value="Paneer Makhani" >Paneer Makhani</option>
    </select>
    Last edited by aaandy; Sep 8, 2016, 04:47 PM.

  • #2
    Any markup tag on the page can be changed or removed and more added by using the Document Object Model (DOM) interfaces.

    Code:
    var select = document.querySelector('select[nField6066273');
    We can then access the options by the .children property which is an array-like object that contains the option elements. If we want to change the first option we can write...

    Code:
    select.children[0].textContent = 'Some new value';
    New options can be appended to the end of the list using other methods.

    Code:
    var newOption = document.createElement('option');
    newOption.value = 'new value';
    newOption.textContent = 'new value';
    select.appendChild(newOption);
    Here's a live example.

    Comment


    • #3
      Originally posted by Clock Out View Post
      Any markup tag on the page can be changed or removed and more added by using the Document Object Model (DOM) interfaces.

      Code:
      var select = document.querySelector('select[nField6066273');
      We can then access the options by the .children property which is an array-like object that contains the option elements. If we want to change the first option we can write...

      Code:
      select.children[0].textContent = 'Some new value';
      New options can be appended to the end of the list using other methods.

      Code:
      var newOption = document.createElement('option');
      newOption.value = 'new value';
      newOption.textContent = 'new value';
      select.appendChild(newOption);
      Here's a live example.

      that works, thanks

      But is there anyway to remove an option if not needed? What if I just want 2 options?
      Last edited by aaandy; Sep 9, 2016, 11:39 AM.

      Comment


      • #4
        I figured it out. Thanks for help

        select.options.remove(4);

        Comment


        • #5
          Instead of:

          Code:
          var newOption = document.createElement('option');
          newOption.value = 'new value';
          newOption.textContent = 'new value';
          select.appendChild(newOption);
          you can do

          Code:
          select.appendChild(new Option('new option text','new option value'));
          Stephen
          Learn Modern JavaScript - http://javascriptexample.net/
          Helping others to solve their computer problem at http://www.felgall.com/

          Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

          Comment

          Working...
          X