Applying event behaviors to a drop down menu

[crystalb24]

I have a drop down menu with 9 pre-populated choices and want to include the option for the user to create there own choice. The best way that I can think to do this is to have a "Create my own" value as a choice and to apply an onClick function to that choice, but I've never applied such behaviors to choices in a drop down menu. Is this even possible? And, if so, any thought about how to acomplish it?

~Crystal

 

[DaZZleD]

you have an event called onChange. in this event you could check to see what the text of the selected option is and accordingly pop up a javascript dialog to ask for a value that can afterwards be added as a new option to the dropdown list options list.

--------------------------
"two wrongs don't make a right, but three lefts do" - the unknown sage

 

[crystalb24]

So, if this is my code...

	<select size="1">
	<option></option>
	<option value="Total Revenue">Total Revenue</option>
        <option value="Recurring Revenue">Recurring Revenue</option>
        <option value="% Recurring Revenue">% Recurring Revenue</option>
        <option value="Total Assets">Total Assets</option>
        <option value="% Fee-based assets">% Fee-based assets</option>
        <option value="# Accounts"># Accounts</option>
        <option value="# Households"># Households</option>
        <option value="Assets per household">Assets per household</option>
        <option value="ROA">ROA</option>
	<option onChange=""></option>
    </select>

...how to I code the onChange function? Ideally I would like for a pop-up box to ask the user to enter there own choice, click "OK" and have it populate back into the original page.

 

[wing2x]

Try this:

    <script type="text/javascript">
      function addNewValue(targ) {
        if (targ.value == 'Add') {
          newVal = prompt('Enter new value');
          newOpt = document.createElement('option');
          newOpt.setAttribute('value',newVal);
          optText = document.createTextNode(newVal);
          newOpt.appendChild(optText);
          targ.insertBefore(newOpt,targ.lastChild);
        }
      }
    </script>
    <select onchange="addNewValue(this)">
        <option value="Total Revenue">Total Revenue</option>
        <option value="Recurring Revenue">Recurring Revenue</option>
        <option value="% Recurring Revenue">% Recurring Revenue</option>
        <option value="Total Assets">Total Assets</option>
        <option value="% Fee-based assets">% Fee-based assets</option>
        <option value="# Accounts"># Accounts</option>
        <option value="# Households"># Households</option>
        <option value="Assets per household">Assets per household</option>
        <option value="ROA">ROA</option>
        <option value="Add">Add a new value... </option>
    </select>

 

[crystalb24]

Very cool. That works great.

Is there a way to control what the pop-up box looks like? I personally don't care but when I demonstrate this on Thursday I know that it will be an issue.

 

[wing2x]

AFAIK, you can't. The popup box is browser dependent. If you want something fancy, you have to look at creating a hidden DHTML layer that would pop-up when the 'Add' option is selected. It is not a menial task, so prepare to roll up your sleeves. ;-)

Alternatively, you might opt to place a hidden textbox beside the dropdown and display it when Add is selected. Then, another button beside the textbox to trigger insertion of new value to dropdown.

 

[crystalb24]

Menial or not, it's something that they are going to want so I might as well get started. They definately like the idea of having a pop-up window but are going to want to make sure that it looks like the original pages. They are very big on the cosmetics of this whole project.