how to replace value in listbox in java script

Question

Replace value in listbox in java script...

<select id="list" >
    <option value="1">Null value</option>

    <option value="1">item 1</option>

    <option value="2">item 2</option>

    <option value="3">item 3</option>

    <option value="4">item 4</option>

    <option value="0">All</option>

</select>

so in the first option NUll value is present how to remove or replace with any text in javascript???

check this: http://stackoverflow.com/questions/10939731/how-to-change-the-value-of-the-currently-selected-item-in-the-list-box — Manoj Awasthi, Nov 12 '13 at 08:26
check this http://stackoverflow.com/questions/10911526/how-to-change-html-selected-option-using-javascript — wshurafa, Nov 12 '13 at 08:30

score 1 · Answer 1 · answered Nov 12 '13 at 08:29

You should give an ID to the box first to access it via JavaScript. Then you could use a button that changes the innerHTML of the ID by clicking on it (maybe you want to use JQuery but it's your choice).

Here's an example:

<select id="list" >
<option id="firstOption" value="1">Null value</option>

<option value="1">item 1</option>

<option value="2">item 2</option>

<option value="3">item 3</option>

<option value="4">item 4</option>

<option value="0">All</option>

<input type="button" onclick="document.getElementById('firstOption').innerHTML='Changed';"/>

You can also access the element by it's class but as soon as you add more options it will cause problems.

i am having lot value so i cant able to find position of it so its possible to change value like if(document.getElementById("list").value=="Null value"){change to some text like } — user2009765, Nov 12 '13 at 09:14

Nikhil N · Accepted Answer · 2013-11-12T09:40:38.993

1

May be following will help you...

Codepen Demo

JS:

document.getElementById("list").options[0]=new Option("New Text", "newval", true, false)

If you want to change Null value present at any location, you can try following.

var options = document.getElementById("list").options;
for(var i=0;i<options.length;i++) {
  if(options[i].innerHTML == "Null value") {
    document.getElementById("list").options[i]=new Option("New Text", "newval", false, false)
  }
}

edited Nov 12 '13 at 09:40

answered Nov 12 '13 at 08:32

Nikhil N

4,507
1
35
53

it work fine but i am having lot value so i cant able to find position of it so its possible to change value like if(document.getElementById("list").value=="Null value"){change to some text like } – user2009765 Nov 12 '13 at 09:13
wat do you mean by value ? do you want to change internal value of each option or text(that is displayed in dropdown) ? – Nikhil N Nov 12 '13 at 09:37
i thought u have misunderstood the thing is am having 100 value in list box with one "NULL VALUE" so i cant able to find it position of index ...how to change dynamically it...??? not multi "NULL VALUE" – user2009765 Nov 12 '13 at 09:39
to find its position, you'll need to iterate through all of the options. In this case also, above code should work. – Nikhil N Nov 12 '13 at 09:43
another doubt i.e if (null value ) is present in listbox is its possible to remove the value... – user2009765 Nov 12 '13 at 10:00
ys, you can do something like `if(options[i].innerHTML == "Null value") { options[i]=null; }` – Nikhil N Nov 12 '13 at 10:04
is there any syntax like this...document.getElementById("Geography").options[i].remove; – user2009765 Nov 12 '13 at 10:44

score 0 · Answer 3 · answered Nov 12 '13 at 08:33

You can use jQuery to loop through elements and find any 'Null value' ones and replace them with whatever you need:

$(document).ready(function () {
  // loop through all options in a list
  $('#list').find('option').each(function (index) {
    // if text is what you need
    if ($(this).text() == 'Null value')
        // replace it 
        $(this).text('Whatever')
  });
});

Here is working example http://jsfiddle.net/GuWtD/

This works even if Null value is not the first and is multiple in list.

score 0 · Answer 4 · answered Nov 12 '13 at 08:35

Try this: http://jsfiddle.net/25MVf/

<select id="list" >
    <option value="1">Null value</option>

    <option value="1">item 1</option>

    <option value="2">item 2</option>

    <option value="3">item 3</option>

    <option value="4">item 4</option>

    <option value="0">All</option>

</select>

<div id='change'>Change Value</div>


var chg = document.getElementById('change');
chg.onclick = function () {
    var slt = document.getElementById('list');
    slt.children[0].text = "Value Changed";
}

how to replace value in listbox in java script

4 Answers4