CODEWITHSUNDEEP
javascripthtml-select
breq
breq

Reputation: 25506

How to programatically select an HTML option using JavaScript?

I have option menu like this:

<form name="AddAndEdit">
   <select name="list" id="personlist">
      <option value="11">Person1</option>
      <option value="27">Person2</option>
      <option value="17">Person3</option>
      <option value="10">Person4</option>
      <option value="7">Person5</option>
      <option value="32">Person6</option>
      <option value="18">Person7</option>
      <option value="29">Person8</option>
      <option value="28">Person9</option>
      <option value="34">Person10</option>
      <option value="12">Person11</option>
      <option value="19">Person12</option>
   </select>
</form>

And now I want to change the selected option by using an href. For example:

<a href="javascript:void(0);"
  onclick="document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected';">change</a>

But I want to select the option with value=11 (Person1), not Person12.

How do I change this code?

Upvotes: 286

Views: 788755

Answers (13)

ccpizza
ccpizza

Reputation: 31676

In case you are using mySelect.value = myOptionValue as per the accepted answer, but it still doesn't seem to work, then make sure that by the time you call your code the select options are fully rendered and interactive — if you are calling your code on page load, but it is not invoked via something like window.onload, DOMContentLoaded, qjuery's .ready() or whatever is used in your env then it is likely that you are running the code too early.

This will likely be the case when the select options are populated dynamically.

To check run the code manually via devtools when the page is fully loaded, or delay it with setTimeout() (use timeout for checking only, it's not a correct solution).

Upvotes: 0

NIKHIL CHANDRA ROY
NIKHIL CHANDRA ROY

Reputation: 1087

Jquery solution,

$('select').prop('selectedIndex', 1);

Upvotes: -1

Raktim Raihan Prova
Raktim Raihan Prova

Reputation: 3

Note: Option Index count starts from 0. That means first option will be indexed at 0.

document.querySelector(".add__btn").addEventListener("click", function(){
  var index = 1; /*change option value here*/  document.querySelector(".add__type").options.selectedIndex = index;
  document.querySelector(".add__description").value = "Option Index";
  document.querySelector(".add__value").value = index;
});
<html>
    <div class="add__container">
         <select class="add__type">
            <option value="inc" selected>+</option>
            <option value="exp">-</option>
         </select>
         <input type="text" class="add__description" placeholder="Add description">
         <input type="number" class="add__value" placeholder="Value">
         <button class="add__btn"> Submit </button>
</div>

<h4> Default Option Value will be selected after pressing Submit </h4>

Upvotes: 0

Cake Princess
Cake Princess

Reputation: 217

Your own answer technically wasn't incorrect, but you got the index wrong since indexes start at 0, not 1. That's why you got the wrong selection.

document.getElementById('personlist').getElementsByTagName('option')[**10**].selected = 'selected';

Also, your answer is actually a good one for cases where the tags aren't entirely English or numeric.

If they use, for example, Asian characters, the other solutions telling you to use .value() may not always function and will just not do anything. Selecting by tag is a good way to ignore the actual text and select by the element itself.

Upvotes: 4

Tariqul Islam
Tariqul Islam

Reputation: 347

It's an old post, but if anyone is still looking for solution to this kind of problem, here is what I came up with:

<script>
  document.addEventListener("DOMContentLoaded", function(e) {
    document.forms['AddAndEdit'].elements['list'].value = 11;
  });
</script>

Upvotes: 1

Nono
Nono

Reputation: 7302

Tools as pure JavaScript code for handling Selectbox:

Graphical Understanding:

Image - A

enter image description here

Image - B

enter image description here

Image - C

enter image description here

Updated - 25-June-2019 | Fiddler DEMO

JavaScript Code:

/**
 * Empty Select Box
 * @param eid Element ID
 * @param value text
 * @param text text
 * @author Neeraj.Singh
 */
function emptySelectBoxById(eid, value, text) {
    document.getElementById(eid).innerHTML = "<option value='" + value + "'>" + text + "</option>";
}


/**
 * Reset Select Box
 * @param eid Element ID
 */

function resetSelectBoxById(eid) {
    document.getElementById(eid).options[0].selected = 'selected';
}


/**
 * Set Select Box Selection By Index
 * @param eid Element ID
 * @param eindx Element Index
 */

function setSelectBoxByIndex(eid, eindx) {
    document.getElementById(eid).getElementsByTagName('option')[eindx].selected = 'selected';
    //or
    document.getElementById(eid).options[eindx].selected = 'selected';
}


/**
 * Set Select Box Selection By Value
 * @param eid Element ID
 * @param eval Element Index
 */
function setSelectBoxByValue(eid, eval) {
    document.getElementById(eid).value = eval;
}


/**
 * Set Select Box Selection By Text
 * @param eid Element ID
 * @param eval Element Index
 */
function setSelectBoxByText(eid, etxt) {
    var eid = document.getElementById(eid);
    for (var i = 0; i < eid.options.length; ++i) {
        if (eid.options[i].text === etxt)
            eid.options[i].selected = true;
    }
}


/**
 * Get Select Box Text By ID
 * @param eid Element ID
 * @return string
 */

function getSelectBoxText(eid) {
    return document.getElementById(eid).options[document.getElementById(eid).selectedIndex].text;
}


/**
 * Get Select Box Value By ID
 * @param eid Element ID
 * @return string
 */

function getSelectBoxValue(id) {
    return document.getElementById(id).options[document.getElementById(id).selectedIndex].value;
}

Upvotes: 75

Frank M
Frank M

Reputation: 89

If you are adding the option with javascript

function AddNewOption(userRoutes, text, id) 
{
    var option = document.createElement("option");
    option.text = text;
    option.value = id;
    option.selected = "selected";
    userdRoutes.add(option);
}

Upvotes: 6

Ronnie Smith
Ronnie Smith

Reputation: 18555

mySelect.value = myValue;

Where mySelect is your selection box, and myValue is the value you want to change it to.

Upvotes: 64

sunil yaduvanshi
sunil yaduvanshi

Reputation: 468

You can use JQuery also

$(document).ready(function () {
  $('#personlist').val("10");
}

Upvotes: 5

Nick
Nick

Reputation: 1869

I believe that the blog post JavaScript Beginners – Select a dropdown option by value might help you.

<a href="javascript:void(0);" onclick="selectItemByValue(document.getElementById('personlist'),11)">change</a>

function selectItemByValue(elmnt, value){

  for(var i=0; i < elmnt.options.length; i++)
  {
    if(elmnt.options[i].value === value) {
      elmnt.selectedIndex = i;
      break;
    }
  }
}

Upvotes: 35

Rachana
Rachana

Reputation: 131

An array Index will start from 0. If you want value=11 (Person1), you will get it with position getElementsByTagName('option')[10].selected.

Upvotes: 3

breq
breq

Reputation: 25506

Change

document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected'

to

document.getElementById('personlist').value=Person_ID;

Upvotes: 343

caspinos
caspinos

Reputation: 431

You could also change select.options.selectedIndex DOM attribute like this:

function selectOption(index){ 
  document.getElementById("select_id").options.selectedIndex = index;
}
<p>
<select id="select_id">
  <option selected>first option</option>
  <option>second option</option>
  <option>third option</option>
</select>
</p>
<p>
  <button onclick="selectOption(0);">Select first option</button>
  <button onclick="selectOption(1);">Select second option</button>
  <button onclick="selectOption(2);">Select third option</button>
</p>

Upvotes: 30

Related Questions