Combining option values in dropdown list - html

I'm trying to populate a searchable dropdown list with specific values, but I would like to combine two of the values and have them return results for either value. For example:
<td align="left" valign="top" nowrap>
<select name="SPORTS"
id="idCustom1"
onChange="AddSearchItem(this);"
class="StuFindSelect">
<option value=" ">No Attribute selected
<option value="BASEBALL">Baseball
<option value="BASKETBM">Mens Basketball
<option value="BASKETBW">Womens Basketball
<option value="CHEERLDS">Cheerleader
<option value="FOOTBALL">Football
<option value="GOLF">Golf
<option value="LACROSSW">Womens Lacrosse
<option value="SOCCERM">Mens Soccer
<option value="SOCCERW">Womens Soccer
<option value="TENNISM">Mens Tennis
<option value="TENNISW">Womens Tennis
<option value="TRACK">Track
<option value="VOLLEYBL">Volleyball
<option value="XCOUNTM">Mens Cross Country
<option value="XCOUNTW">Womens Cross Country
</select>
</td>
I want to combine the results that return BASKETBM or BASKETBW when a user selects Basketball. After researching I've tried combining them in several different ways,
<option value="[BASKETBM,BASKETBW]">Basketball
<option value="BASKETBM,BASKETBW">Basketball
<option value="BASKETBM|BASKETBW">Basketball
and every other permutation I could find, but nothing seems to work. Everytime it returns zero search results when testing it. Any ideas what I'm doing wrong?
Thanks.

I do not know what AddSearchItem(this); does, as a function, but I'm guessing the problem is there. Maybe you can detail more this part of your question.
You can without problem have an option like this:
<option value="BASKETBM,BASKETBW">Basketball
and use this.value.split(',') to get values out of it.

Related

How to maintain dropdown list after it selected through URL?

for example I have this URL
http://oursite.com/WebSite5/production/ReportPage.aspx?name=&office=VTM
on dropdown list VTM is selected, but in unable to select another option.
How can I maintain the dropdown list item like this?
Follow this code to add a dropdown link like as second image
<label for="country">Country:</label>
<select name="country" id="countryselect">
<option value="0" selected disabled>Select Your Country</option>
<option value="Sri Lanka"> Sri Lanka</option>
<option value="Qatar"> Qatar</option>
<option value="Moldova (Republic of)"> Moldova (Republic of)</option>
<option value="Korea (Democratic People's Republic of)"> Korea (Democratic People's Republic of)</option>
<option value="Åland Islands"> Åland Islands</option>
</select>
You can use a selected attribute to Add always selected option and disable attribute mean it can't select to user.

multiple select is not working at all on chrome

I'm having some weird issues.
I need a multiple select with some values in it, but somehow if I type
multiple and size values to select tag they are not working.
For that I decided to make a new clear file to test it and the result is same.
<form action="" method="post">
<select name="data[]" multiple size="5">
<option value="1">1Value</option>
<option value="2">2Value</option>
<option value="3">3Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
</select>
</form>
These are my codes, and this is below is the result:
screenshot
I can't even select them one by one, I mean browser is not highlighting the ones that I selected, I need to hold CTRL to hightlight them, as like working on windows I don't know where is the problem.
Most likely you have installed some Chrome extension that is preventing the Ctrl key to work as expected. Try removing that.
Have you bind it inside select tags?, you have to.
<select name="values" multiple>
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
<option value="4">value4</option>
</select>
Hope it helps.
Please go with HTML multiple Attribute.
Try Below code:
<select name="Custom_Name" multiple>
<option value="1">1Value</option>
<option value="2">2Value</option>
<option value="3">3Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
Al the best.

Store two values in a select form element separately

Does there exist a way to store two separate values in a select form element? For instance
<select>
<option value="">A + B</option>
</select>
I would like to store values A and B separately, but select them both with one option.
You can add two options:
<option value="a">A</option>
<option value="b">B</option>
Is this what you need?
Use a multiple select instead:
<select name="yourChoices[ ]" multiple>
<option value="A">A</option>
<option value="B">B</option>
</select>
Users are able to choose more than one option.
Here is an example: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple

Drop-down lists for contact form

Is there a way to add an additional 'submenu' to a dropdown list on a contact form? So it would technically work like a drop-down navigation.
Below is the drop-down list for my contact form. And i've been asked to see if I can add additional options to lets say, Existing Partner. So when they hover over that item it expands to other options.
<label for="hear">How did you hear about us? </label>
<select class="contact-drop-down" name="hear" id="hear">
<option>Click to choose</option>
<option value="1">Existing Partner</option>
<option value="2">Word of mouth</option>
<option value="3">Brochure</option>
<option value="4">Email mailshot</option>
<option value="5">Google</option>
<option value="6">Yahoo</option>
<option value="7">Bing</option>
<option value="8">Other search engine</option>
<option value="9">Other</option>
</select>
You can't expand on hover with the standard select within HTML, but you can with either Javascript or HTML5 and CSS3.
This site has a list of 30 examples of HTML5 navigation menus and this site has a large selection of Javascript and JQuery examples.
Hopefully one of these might help you get what you want.
You can use optgroup tag for this.
<select>
<optgroup label="Existing Partners">
<option value="existing_partner_a">Partner A</option>
<option value="existing_partner_b">Partner B</option>
<option value="existing_partner_others">Others</option>
</optgroup>
</select>
No you cannot add sub menu to actual dropdown control. But you may find many custom controls.
Check out this
Saurabh Goyal above suggested to use . I also thought of suggesting the same. But is used for categorization & I dont think thats what you want.
Try optgroup for this .for example
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

Form Select List - Initially selected option not working correctly in IE

I have a form with a select list of various office locations, i have it set so it should have the office initially selected BUT it does not seem to Work in IE!!! (no surprise)
here is what i am using to preselect:
<option selected value="Office 1">Office 1</option>
here is the site: http://www.nwtaxpreparation.com/offices/122andpowell.html
let me know if you have any solutions!
HTML 4 uses:
<option value="foo" selected>Bar</option>
XHTML REQUIRES:
<option value="foo" selected="selected">Bar</option>
To say that "there is no such thing as selected="whatever" is false!
I recently had the same problem with selected options tags. I had a series of select boxes like this:
<select>
<option value="dr">Day rate</option>
<option selected="selected" value="sv">Social value</option>
</select>
<select>
<option value="dr">Day rate</option>
<option selected="selected" value="sv">Social value</option>
</select>
I couldn't work out why the correct items wouldn't select. I later discovered that it was because there was no name attribute on the select item. Firefox seems to need this to work properly, even in version 15.
<select name="type">
<option value="dr">Day rate</option>
<option selected="selected" value="sv">Social value</option>
</select>
I changed it to the above and selected="selected" works fine now.