/    Sign up×
Community /Pin to ProfileBookmark

Client Side JavaScript and Listboxes

Copy linkTweet thisAlerts:
Apr 28.2009

Hi,

I’m developing a web form in Visual Studio using C# and I’ve come across a situation where I need a little help with some client side scripting. The page has a Listbox1 and a ListBox2 and I would like only one listbox to have a selected item at a time. That is to say if the user selects an item in Listbox1 and then selects an item in ListBox2 then the item in Listbox1 would be unselected. Any help greatly appreciated.

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@ZeroKilledApr 28.2009 — here is a sample, not well coded to me.<i>
</i>&lt;form&gt;
&lt;select name='list1' onchange="if(this.selectedIndex)form.list2.options[0].selected = true;"&gt;
&lt;option value=""&gt;None&lt;/option&gt;
&lt;option value="1"&gt;OPt1&lt;/option&gt;
&lt;option value="2"&gt;opt2&lt;/option&gt;
&lt;option value="3"&gt;Opt3&lt;/option&gt;
&lt;/select&gt;

&lt;select name='list2' onchange="if(this.selectedIndex)form.list1.options[0].selected = true;"&gt;
&lt;option value=""&gt;None&lt;/option&gt;
&lt;option value="1"&gt;OPt1&lt;/option&gt;
&lt;option value="2"&gt;opt2&lt;/option&gt;
&lt;option value="3"&gt;Opt3&lt;/option&gt;
&lt;/select&gt;&lt;/form&gt;
however, it don't make sense to me. if you want only one option selected, then why wouldn't you join both list?
Copy linkTweet thisAlerts:
@rich_wengerauthorApr 29.2009 — I tried your suggestion but it didn't appear to work. I've attached a screen capture of the page loaded in a browser so you might better understand what I'm trying to accomplish.

Below is a section of code relative to the two listboxes:

<td>
<asp:ListBox ID="ListBox2" runat="server" DataSourceID="SqlDataSource2"
DataTextField="BidderServiceType" DataValueField="BidderServiceType" Rows="12"
Width="200px"></asp:ListBox>
</td>
<td>
<asp:Button ID="Button2" runat="server" onclick="Button2_Click"
Text="Add Service" Width="100px" CausesValidation="False" />
<br />
<asp:Button ID="Button3" runat="server" onclick="Button3_Click"
Text="Remove Service" Width="100px" CausesValidation="False" />
</td>
<td>
<asp:ListBox ID="ListBox3" runat="server" DataSourceID="SqlDataSource3"
DataTextField="ServiceType" DataValueField="ServiceType" Rows="12"
Width="200px">
</asp:ListBox>
</td>

[upl-file uuid=f1a415d2-b752-461e-8786-a9b1f3de8e24 size=20kB]mutually exclusive.JPG[/upl-file]
Copy linkTweet thisAlerts:
@ZeroKilledApr 29.2009 — try:
<i>
</i>&lt;script&gt;
function unsel(service){
if(service.selectedIndex &lt; 0)return;
service.options[service.selectedIndex].selected = false;
try{ // damn msie browser!
service.add(new Option('',''), 0);
service.options[0].selected = true;
service.remove(0);
}catch(e){}
}
&lt;/script&gt;
&lt;form&gt;
&lt;select name="provide" size="10" onchange="unsel(this.form.lookup);"&gt;
&lt;option&gt;paving/roadway&lt;/option&gt;
&lt;option&gt;sewer line&lt;/option&gt;
&lt;option&gt;sewer plant&lt;/option&gt;
&lt;option&gt;well&lt;/option&gt;
&lt;/select&gt;

&lt;input type="button" value="add" /&gt;
&lt;input type="button" value="remove" /&gt;

&lt;select name="lookup" size="10" onchange="unsel(this.form.provide);"&gt;
&lt;option&gt;electrical&lt;/option&gt;
&lt;option&gt;mechanical&lt;/option&gt;
&lt;option&gt;tank&lt;/option&gt;
&lt;option&gt;telemetry/control&lt;/option&gt;
&lt;option&gt;water line&lt;/option&gt;
&lt;option&gt;water plant&lt;/option&gt;
&lt;/select&gt;
&lt;/form&gt;
×

Success!

Help @rich_wenger spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...