Working with a drop-down list in html

I am using dropdownlist and one label on my html page. I want to change the label name when I select my dropdownlist window. How is this possible?

pls povide any help for me.

+5
source share
3 answers

Check this example .

It will change the β€œname” attribute of your label and its text content (reading its new name attribute value) to see the change in action.

<script type="text/javascript">
function changeValue(select) {

  var value =  select.options[select.selectedIndex].value;
  var label =  document.getElementById('mylabel');

  label.setAttribute('name', value);
  label.innerHTML = label.getAttribute('name');

} 
</script>

<select name="selectcity" onchange="changeValue(this);" >
    <option>Mumbai</option>
    <option>Delhi</option>
</select>
You selected: <label id="mylabel" name="citylabel"></label>
+1
source
    <select id='derp' onchange="changeVal(this,'changeme');">  <!-- declare select, set onchange to point to changeVal JS -->
        <option value='test'>test</option>
    </select>
    <input id='changeme' />
    <script type='text/javascript'>

        function changeVal(el,changeElID){

            var changeEl = document.getElementById(changeElID); // Get input to change
            changeEl.value = el.options[el.selectedIndex].value; // Change input value to value of selected index

        }
    </script>

[EDIT] re-reading the question, it looks like you are trying to change the name of the input field ... if so, change changeEl.valuetochangeEl.name

+1
source

HTML:

<table cellspacing="0" cellpadding="1" rules="all" border="0" id="gvLanguage">
    <tr>
        <td align="left">
            <select id="ddlLanguage" style="width: 230px;">
                <option value="0">[Select]</option>
                <option value="1">Afrikaans</option>
                <option value="2">Akan</option>
                <option value="3">Albanian</option>
                <option value="4">American</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            Selected Value: <label id="lblChange" ></label>
        </td>
    </tr>
</table>

Jquery:

$(document).ready(function(){
    $("#ddlLanguage").change(function(){
        var vSelectedValue  = $("option:selected",$(this)).text();
       $("#lblChange").text(vSelectedValue);
    });
});

,

0

All Articles