asked on

Display correct label in javascript drop down list on refresh

Greetings Experts;

I have a drop down list that I would like to implement. I have space issues on the screen so I need the dd list to be brief and the value written to the db be expanded. I can accomplish this with the JavaScript I am using now except it does not display the selected option on the screen refresh. As you can see in the code attachment second half, it returns the stored value but the javascript cant match it to display it. I am not a programmer, they just said do it (sound familiar) so I don't have clue how to translate it back to the displayed label. Any ideas?

Thanks
Dave

<td width="201"><span class="elinterface">
                <select name="default_entry_form_name_1"s>
                                    <option value = ""></option>
                  <option value = "Airfare - BP R/VenDD R/City R/Ticket NR/Travel Svc Code NR">Airfare</option>
                  <option value = "Car Rental - BP NR/VenDD R/City R">Car Rental</option>
                  <option value = "Personal Car Mileage">Personal Car Mileage</option>
                  <option value = "Option #01 - BP NR/VenFT NR/City NR">Option 1</option>
                  <option value = "Option #02 - BP R/VenFT R/City R">Option 2</option>
                  <option value = "Option #03 - BP NR/VenFT NR/City NR/Att NR">Option 3</option>
                  <option value = "Option #04 - BP R/VenFT R/City R/Att R">Option 4</option>
                  <option value = "Option #05 - BP/Ven/City/Att - All Hidden">Option 5</option>
                  <option value = "Option #06 - BP R/VenFT NR/City NR">Option 6</option>
                  <option value = "Option #07 - BP NR/VenFT R/City NR">Option 7</option>
                  <option value = "Option #08 - BP NR/VenFT NR/City R">Option 8</option>
                  <option value = "Option #09 - BP NR/VenDD NR/City R">Option 9</option>
                  <option value = "Option #10 - BP NR/VenDD R/City R">Option 10</option>
                  <option value = "Option #11 - BP R/VenFT NR/City R">Option 11</option>
                  <option value = "Option #12 - BP NR/VenFT R/City R">Option 12</option>

                  <script type="text/javascript">
					for (i=0; i < document.getElementById("default_entry_form_name_2").length; i++)
					{
					if (document.getElementById("default_entry_form_name_2").options[i].text == "<%=sdefault_entry_form_name_2%>")
				    {
			        document.getElementById("default_entry_form_name_2").options[i].selected = true
			        i = document.getElementById("default_entry_form_name_2").length
				    }
					}
				</script>
                </select>
              </span> </td>


returned form:


                <select name="default_entry_form_name_1"s>
                                    <option value = ""></option>
                  <option value = "Airfare - BP R/VenDD R/City R/Ticket NR/Travel Svc Code NR">Airfare</option>
                  <option value = "Car Rental - BP NR/VenDD R/City R">Car Rental</option>
                  <option value = "Personal Car Mileage">Personal Car Mileage</option>
                  <option value = "Option #01 - BP NR/VenFT NR/City NR">Option 1</option>
                  <option value = "Option #02 - BP R/VenFT R/City R">Option 2</option>
                  <option value = "Option #03 - BP NR/VenFT NR/City NR/Att NR">Option 3</option>
                  <option value = "Option #04 - BP R/VenFT R/City R/Att R">Option 4</option>
                  <option value = "Option #05 - BP/Ven/City/Att - All Hidden">Option 5</option>
                  <option value = "Option #06 - BP R/VenFT NR/City NR">Option 6</option>
                  <option value = "Option #07 - BP NR/VenFT R/City NR">Option 7</option>
                  <option value = "Option #08 - BP NR/VenFT NR/City R">Option 8</option>
                  <option value = "Option #09 - BP NR/VenDD NR/City R">Option 9</option>
                  <option value = "Option #10 - BP NR/VenDD R/City R">Option 10</option>
                  <option value = "Option #11 - BP R/VenFT NR/City R">Option 11</option>
                  <option value = "Option #12 - BP NR/VenFT R/City R">Option 12</option>

                  <script type="text/javascript">
					for (i=0; i < document.getElementById("default_entry_form_name_1").length; i++)
					{
					if (document.getElementById("default_entry_form_name_1").options[i].text == "Option #01 - BP NR/VenFT NR/City NR")
				    {
			        document.getElementById("default_entry_form_name_1").options[i].selected = true
			        i = document.getElementById("default_entry_form_name_1").length
				    }
					}
				</script>
              </select>

Open in new window

ASKER CERTIFIED SOLUTION

kadaba

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kadaba

The script code can be like.

<script type="text/javascript">
	var ddList = document.getElementById("default_entry_form_name_1");
	for (i=0; i < ddList.options.length; i++)
	{
		if (ddList.options[i].value == "Option #01 - BP NR/VenFT NR/City NR")
		{
			ddList.options[i].selected = true;
		}
	}
</script>

Open in new window

kadaba

This is for your reference.

<html>
<head>
<script type="text/javascript">
	function choose(){
		var ddList = document.getElementById("default_entry_form_name_1");
		for (i=0; i < ddList.options.length; i++)
		{
			if (ddList.options[i].value == "Option #01 - BP NR/VenFT NR/City NR")
			{
				ddList.options[i].selected = true;
			}
		}
	}
	function displayVal(ddObj){
		alert("The Selected Index is:"+ddObj.selectedIndex);
		alert("The Value of the selected index is:"+ddObj.value);
		alert("The displayed text of the selected index is:"+ddObj.options[ddObj.selectedIndex].text);
	}
</script>
</head>
<body>
<select name="default_entry_form_name_1" id="default_entry_form_name_1" onchange="displayVal(this)">
	<option value = ""></option>
	<option value = "Airfare - BP R/VenDD R/City R/Ticket NR/Travel Svc Code NR">Airfare</option>
	<option value = "Car Rental - BP NR/VenDD R/City R">Car Rental</option>
	<option value = "Personal Car Mileage">Personal Car Mileage</option>
	<option value = "Option #01 - BP NR/VenFT NR/City NR">Option 1</option>
	<option value = "Option #02 - BP R/VenFT R/City R">Option 2</option>
	<option value = "Option #03 - BP NR/VenFT NR/City NR/Att NR">Option 3</option>
	<option value = "Option #04 - BP R/VenFT R/City R/Att R">Option 4</option>
	<option value = "Option #05 - BP/Ven/City/Att - All Hidden">Option 5</option>
	<option value = "Option #06 - BP R/VenFT NR/City NR">Option 6</option>
	<option value = "Option #07 - BP NR/VenFT R/City NR">Option 7</option>
	<option value = "Option #08 - BP NR/VenFT NR/City R">Option 8</option>
	<option value = "Option #09 - BP NR/VenDD NR/City R">Option 9</option>
	<option value = "Option #10 - BP NR/VenDD R/City R">Option 10</option>
	<option value = "Option #11 - BP R/VenFT NR/City R">Option 11</option>
	<option value = "Option #12 - BP NR/VenFT R/City R">Option 12</option>
</select>
<input type="button" onclick="choose()" value="choose option 1">
</body>
</html>

Open in new window

David Evans

ASKER

Brilliant!

David Evans

ASKER

Thanks Kadaba, works perfectly.

Dave

kadaba

Any doubts let me know, I will assist you.

Thanks for the points and have a great day ahead.