Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 9502
  • Last Modified:

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

0
raymondmantle
Asked:
raymondmantle
  • 3
  • 2
2 Solutions
 
_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
 
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now