Multi select drop-down list

I have found this Javascript for Multi select drop-down list,

My question is, how do i add many of these Multi select drop-down list on one page, with its own id and options.

I have tried just puting in 2, but when i click in the select button, it defaults back to the first drop down list, and when i click ok button, it populates the first field, not the second on i added.

I am new to all this, and could really do with some help!

thanks
Ray
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>MultiSelect Dropdown Page</title>
    
    <script language="javascript">
    
    function showDropDown()
    {
        document.getElementById("ddlDiv").style.visibility = "visible";
    }
    
    function acceptDropDown()
    {
        document.getElementById("ddlDiv").style.visibility = "hidden";
        // Get values into textbox
        var myList = document.getElementById("selMulti");
        var myListCount = myList.options.length; // number of items
        var textToDisplay = "";
        for (i=0; i < myListCount; i++) if (myList.options[i].selected == true) textToDisplay += myList.options[i].value + ";";
        document.getElementById("txtDropDown").value = textToDisplay;
    }
    
    </script>
</head>
<body>
 
<nobr><input id="txtDropDown" type="text" style="width: 147px" readonly /> <input id="cmdDropDown" type="button" onclick="showDropDown()" value=" v " /></nobr>
<div id="ddlDiv" style="visibility:hidden">
<select id="selMulti" multiple style="width: 153px">
        <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="5">Item 5</option>
    </select>
    <input id="cmdOK" onclick="acceptDropDown()" type="button" value="ok" /></div>
 
</body>
 
</html>

Open in new window

raymondmantleAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

_Stilgar_Commented:
getElementById("ddlDiv") is the key. Change the code to be something like below.

Stilgar.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>MultiSelect Dropdown Page</title>
    
    <script language="javascript">
    
    function showDropDown(ddid)
    {
        document.getElementById(ddid).style.visibility = "visible";
    }
    
    function acceptDropDown(ddid)
    {
        document.getElementById(ddid).style.visibility = "hidden";
        // Get values into textbox
        var myList = document.getElementById("selMulti");
        var myListCount = myList.options.length; // number of items
        var textToDisplay = "";
        for (i=0; i < myListCount; i++) if (myList.options[i].selected == true) textToDisplay += myList.options[i].value + ";";
        document.getElementById("txtDropDown").value = textToDisplay;
    }
    
    </script>
</head>
<body>
 
<nobr><input id="txtDropDown" type="text" style="width: 147px" readonly /> <input id="cmdDropDown" type="button" onclick="showDropDown('ddlDiv1');" value=" v " /></nobr>
<div id="ddlDiv1" style="visibility:hidden">
<select id="selMulti" multiple style="width: 153px">
        <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="5">Item 5</option>
    </select>
    <input id="cmdOK" onclick="acceptDropDown('ddlDiv1');" type="button" value="ok" /></div>
 
</body>
 
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
raymondmantleAuthor Commented:
Hi Stilgar, This solution did not work for me, it kelp defaulting back to the first option list.

I did how ever get it working, doing it slightly diffrent to what you suggested.

I thanks you anyways, as your answer got me thinking. I am sure i have gone around it all the wrong way, but it has worked, and the other way didnt.

Thanks
3 scripts for each of the 3 multi drop down list.
 
<script language="javascript">
    
    function showDropDown()
    {
        document.getElementById("ddlDiv").style.visibility = "visible";
    }
    
    function acceptDropDown()
    {
        document.getElementById("ddlDiv").style.visibility = "hidden";
        // Get values into textbox
        var myList = document.getElementById("selMulti");
        var myListCount = myList.options.length; // number of items
        var textToDisplay = "";
        for (i=0; i < myListCount; i++) if (myList.options[i].selected == true) textToDisplay += myList.options[i].value + ";";
        document.getElementById("txtDropDown").value = textToDisplay;
    }
    
    </script>
	
	
	 <script language="javascript">
    
    function showDropDown2()
    {
        document.getElementById("ddlDiv2").style.visibility = "visible";
    }
    
    function acceptDropDown2()
    {
        document.getElementById("ddlDiv2").style.visibility = "hidden";
        // Get values into textbox
        var myList = document.getElementById("selMulti2");
        var myListCount = myList.options.length; // number of items
        var textToDisplay = "";
        for (i=0; i < myListCount; i++) if (myList.options[i].selected == true) textToDisplay += myList.options[i].value + ";";
        document.getElementById("natDropDown").value = textToDisplay;
    }
    
    </script>
	<script language="javascript">
    
    function showDropDown3()
    {
        document.getElementById("ddlDiv3").style.visibility = "visible";
    }
    
    function acceptDropDown3()
    {
        document.getElementById("ddlDiv3").style.visibility = "hidden";
        // Get values into textbox
        var myList = document.getElementById("selMulti3");
        var myListCount = myList.options.length; // number of items
        var textToDisplay = "";
        for (i=0; i < myListCount; i++) if (myList.options[i].selected == true) textToDisplay += myList.options[i].value + ";";
        document.getElementById("ageDropDown").value = textToDisplay;
    }
    
    </script>
------------------------------------------------------------------------
Then added the following for each of the multi drop down list.
 
<nobr>
          <div align="center">
              <input name="strBranchID" type="text" id="txtDropDown" style="width: 147px" readonly="readonly" />
            <input id="cmdDropDown" type="button" onclick="showDropDown()" value=" v " />
            </div>
        </nobr>
          <div id="ddlDiv" style="visibility:hidden">
            <p><center>
              <select name="Branch" multiple="multiple" id="selMulti" style="width: 153px">
                <option value="1901">Wexford</option>
                <option value="1902">Enniscorty</option>
                <option value="1903">Gorey</option>
                <option value="1904">Arklow</option>
                <option value="1905">Athy</option>
              </select>
              <input id="cmdOK" onclick="acceptDropDown()" type="button" value="ok" />
            </p>
          </div>
        <p>&nbsp;</p>
      <p> </p></td>
      <td width="243"><div align="center"><strong>Select Nat </strong><br />
        </div>
          <nobr>
          <div align="center">
            <input name="strNat" type="text" id="natDropDown" style="width: 147px" readonly="readonly" />
            <input id="cmdDropDown" type="button" onclick="showDropDown2()" value=" v " />
          </div>
        </nobr>
          <div id="ddlDiv2" style="visibility:hidden">
            <p>
              <center>
              <select name="Nat" multiple="multiple" id="selMulti2" style="width: 153px">
                <option value="Irish">Irish</option>
                <option value="Polag">Polag</option>
                <option value="German">German</option>
              </select>
              <input id="cmdOK" onclick="acceptDropDown2()" type="button" value="ok" />
            </p>
          </div>
        <p>&nbsp;</p>
        <p> </p></td>
      <td width="243"><div align="center"><strong>Select Age Group </strong><br />
        </div>
          <nobr>
          <div align="center">
            <input name="strAgeGroup" type="text" id="ageDropDown" style="width: 147px" readonly="readonly" />
            <input id="cmdDropDown" type="button" onclick="showDropDown3()" value=" v " />
          </div>
        </nobr>
          <div id="ddlDiv3" style="visibility:hidden">
            <p>
              <center>
              <select name="age" multiple="multiple" id="selMulti3" style="width: 153px">
                <option value="1">0 to 9</option>
                <option value="2">10 to 19</option>
                <option value="3">20 to 29</option>
                <option value="4">30 to 39</option>
                            </select>
              <input id="cmdOK" onclick="acceptDropDown3()" type="button" value="ok" />
            </p>
          </div>
        <p>&nbsp;</p>
        <p> </p></td>
    </tr>
  </table>
  <input type="submit" name="Submit" value="Submit" />
        </p>
</form>

Open in new window

0
_Stilgar_Commented:
Well, I provided the solution and identified the source of the problem and you just applied it in a different way. I understand you have limited number of points, but this is not the way things work around here... Let the Zone Moderator decide.

Stilgar.
0
raymondmantleAuthor Commented:
No, your solution did not work, when i apply 2 or more multi list drop downs, they would all defualt back to the options on the first selection, not thier own options.

But if you insist on receiving the points, far enough, as you did get me thinking with your answer.
0
raymondmantleAuthor Commented:
The anwer provided, did not allow me to have more then one drop down with its own options. I hadto use a numberr of changes to create what i wanted, which was not supplied by Stilgar. But i had said in respones to his comments, if he insist on the points i would give them.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.