If I have

<select name="id[3]" id="attrib-3">
  <option value="11">None</option>
  <option value="13">White ($4.72)</option>
  <option value="32">Black ($5.90)</option>
  <option value="12">Blue ($5.90)</option>
</select>

and I want to change the prices based on another dropdown, what are my options? (suppose I know in this case that option 13 should be 5.72, option 32 should be 6.90 and option 12 should be 6.90, for example). I have the onchange on my first dropdown triggering, and I know how to get to attrib-3, but I'm not sure how to change the text fields for the dropdown.

If I have

<select name="id[3]" id="attrib-3">
  <option value="11">None</option>
  <option value="13">White ($4.72)</option>
  <option value="32">Black ($5.90)</option>
  <option value="12">Blue ($5.90)</option>
</select>

and I want to change the prices based on another dropdown, what are my options? (suppose I know in this case that option 13 should be 5.72, option 32 should be 6.90 and option 12 should be 6.90, for example). I have the onchange on my first dropdown triggering, and I know how to get to attrib-3, but I'm not sure how to change the text fields for the dropdown.

• javascript
• forms

3 Answers 3

You can loop over the options:

for(var i = 0, l = select.options.length; i < l; i++) {
    var option = select.options[i];
    if(option.value == "...") {
        option.innerHTML = "...";
    }
}

I would put that in a function and pass a value you search and the replacement, or a map. Something like:

setOptionText(select, 'value', 'text');
// or
setOptionText(select, {'value': 'text', 'value': 'text', ...});

Reference: HTMLSelectElement

Felix's solution does the trick, and is pure JavaScript, but you may find it easier to use jQuery. It has short-cut functions for things such as this. For example:

$('option[value="13"]').text('some text');

Here's a fiddle demonstrating this.

Please note that using jQuery means that pages will need to load the library. This may impact performance. In my experience, usually the performance implication of jQuery isn't worth worrying about. It also has the advantage of allowing you to write less JS to achieve the same goal, potentially actually improving performance if you have a lot of script.

My approach to find all dropdowns with the entry "(Ohne)" which is the SharePoint default value for lookupfields dropdown. It will find all dropdown values "(Ohne)" and rename them to "Bitte wählen" which means please select in English. Quick and dirty to put into Web/List/Listname/NewForm.aspx with SharePoint Designer.

Maybe usefull for some dirty solutions:

<script language="javascript" type="text/javascript">
var dropDowns = document.getElementsByTagName('select');
for (var i = 0; i < dropDowns.length; i++) {
    try{
    if (dropDowns[i].options[0].text == '(Ohne)')
    {
        dropDowns[i].options[0].text = 'Bitte wählen';
    }
    }
    catch(err)
    {
        // catches array exceptions occurred by <select> tags without <options>
    }
}
</script>

sharepoint 2007 designer newform javascript lookupfield change value