multiselect from dropdownlist for web app?_问答_开发者

multiselect from dropdownlist for web app?

开发者 https://www.devze.com 2023-01-19 22:08 出处：网络

I\'m building a web app that will come back with a report. For certain parameters where the user has requested a dropdown list, they also want to be able to select more than one option at a time.

I'm building a web app that will come back with a report. For certain parameters where the user has requested a dropdown list, they also want to be able to select more than one option at a time.

e.g. show me all tr开发者_开发问答ansactions from the states of TX, WV, and ID.

The reason I've decided to go with the dropdownlist they requested and not a listbox is there are over 40 parameters they can pick from and my page is already crammed with that many controls.

You won't be able to do it with a dropdownlist directly but what you could do is fake it.

Have a hidden ListBox on your page. Construct something that looks like a dropdownlist visually (label + image would work). During the onclick event of your fake dropdownlist show your listbox underneath your dropdownlist. Hide the listbox during the onblur event for the ListBox. Also you could throw in some jquery to animate the unveiling of your listbox to more closely match the look of a dropdownlist.

try this out: have a drop down for unselected choices and a list box for selected; similar to anton lavey's suggestions but slightly less elaborate.

<style>
select { width: 200px; }
</style>
<body>
 <select id="sel" onchange="list.appendChild(this[this.selectedIndex]);">
  <option disabled>Select items from this list</option>
  <option value="a">a</option>
  <option value="c">c</option>
  <option value="d">d</option>
</select><br>
<select multiple="" id="list"><option value="b">b</option></select>
<button onclick="while(list.selectedIndex > -1) { sel.appendChild(list[list.selectedIndex]); }">Remove selected</button>
</body>

ordering can be preserved if you scan through to find the right spot to insert.