Can I use the same option elements in multiple select drop downs? - html

I'm trying to find a way to use the same list of options for multiple select drop downs in a table. I have to use the same drop down 15 times for a form but I don't want the code to have the same big statement repeated 15 times in the code:
<select id="RangeDD" style="border: 0px; outline: 0px; width: 100%">
<option value="" selected disabled hidden></option>
<option value="VeryLow">Very Low</option>
<option value="Low">Low</option>
<option value="LowAverage">Low Average</option>
<option value="Average">Average</option>
<option value="HighAverage">High Average</option>
<option value="Superior">Superior</option>
<option value="VerySuperior">Very Superior</option>
<option value="NotAdministered">Not Administered</option>
</select>
If there is a way to do this without using JavaScript that would be preferred. The site I'm building in has JavaScript stored in a different area and will not let me simply put <script> tags in my code.

You could try using a virtual include statement, if your site allows it.
Create a document called options.html, with just the code for the options in it:
<option value="" selected disabled hidden></option>
<option value="VeryLow">Very Low</option>
<option value="Low">Low</option>
<option value="LowAverage">Low Average</option>
<option value="Average">Average</option>
<option value="HighAverage">High Average</option>
<option value="Superior">Superior</option>
<option value="VerySuperior">Very Superior</option>
<option value="NotAdministered">Not Administered</option>
Then add the include statement to your main page wherever you want the select drop-down to appear:
<select id="RangeDD" style="border: 0px; outline: 0px; width: 100%">
<!--#include virtual="options.html"-->
</select>

Related

HTML Sortby using select option

i have been trying to make a if statement where it get the value of the selected option and run search sql to get the needed data but i won't work.. i would rather not create IF statement for each option as there are many of them which will make IF statement hard to track.
things i did: i know it can work with Weapons.php?sortby=Axe but this will require long IF statement for each option so i wanted to break it down into 1 single IF statement for the entire Select option.
below code works by generating a new page and linked as http://localhost:8082/GameDataBase/Axe
which is i am trying to make it appear as http://localhost:8082/GameDataBase/Weapons.php?sortby=Axe
my current code so far
<td style="padding:0 15px 0 15px;">
<select name="weapontypeselect" style="background-color:#555; color: white;" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value)"><option value="">-</option>
<option value="Axe">Axes</option>
<option value="Sword">Swords</option>
<option value="Hammer">Hammers</option>
<option value="Gauntlet">Gauntlets</option>
<option value="Longbow">Longbows</option>
<option value="Shortbow">Shortbows</option>
<option value="Quiver">Quivers</option>
<option value="Flail">Flails</option>
<option value="Mace">Maces</option>
<option value="Wand">Wands</option>
<option value="Shield">Shields</option>
<option value="Chakram">Chakrams</option>
<option value="Fan">Fans</option>
<option value="Focuse">Focuses</option>
<option value="Stave">Staves</option>
<option value="Grimoire">Grimoires</option>
<option value="Orb">Orbs</option>
<option value="Puppet">Puppets</option>
<option value="Bubble Blaster">Bubble Blasters</option>
<option value="Cannon">Cannons</option>
<option value="Powerglove">Powergloves</option>
</select></td>
below is the IF statement i am trying to use for all the above options
if ($_GET['weapontypeselect'])
{
$sql="SELECT * FROM `weapons` WHERE `weapon_type` = ".$_GET['weapontypeselect']." ";
}

HTML select options are inaccessible

I must have missed something very trivial, but I cant figure it out.
The select below shows 5 options (as expected), but I cant get access to option 6 and 7. The scrollbar is shown, but the browser doesnt allow me to move it down
<select size='5' multiple name='driver[]'>
<option value= >(No Driver Filter)</option>
<option value=drivername=''></option>
<option value=drivername='alex'>alex</option>
<option value=drivername='marc'>marc</option>
<option value=drivername='frank'>frank</option>
<option value=drivername='james'>james</option>
<option value=drivername='michael'>michael</option>
</select>
I think your code is not well formatted . You should use double quotes for attribute values.
<select size="5" multiple="multiple" name="driver[]">
<option value="" >(No Driver Filter)</option>
<option value="drivername=''"></option>
<option value="drivername='alex'">alex</option>
<option value="drivername='marc'">marc</option>
<option value="drivername='frank'">frank</option>
<option value="drivername='james'">james</option>
<option value="drivername='michael'">michael</option>
</select>

select selected label without being an option

Didn't how to put this question... How can I show a descrition / deafukt value without it being an options.
Eg:
<select class="form-control">
<option value="">Choose a Number...</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
How to show "Choose a Number" in unselected mode but not have it as an option. Like dropdown should show only the options which can be selected.
The select tag doesn't come with a placeholder attribute. To work around that you can do the following:
HTML:
<select>
<option class="hidden_option" selected disabled>Choose a number</option>
<option>1</option>
<option>2</option>
</select>
CSS:
select > option.hidden_option{
display: none;
}
This way you can make a pseudo-placeholder that will not be listed as an option.
Here is a JsFiddle demo for you to see it in action

Selecting an option in drop down menu one determines list available in the second drop down menu

I want to make the contains of a second drop down menu dependent on what is selected in the the first. In my case wish to do it for a car selection option. i.e when the car make is selected this then populates the model drop down menu with the relevant models.
As there are a lot of makes of car I would like to keep it concise if possible I presume arrays of models for each make is the solution but how do implement this.
I have look at various solutions and cannot find a suitable answer to this, any suggestions/examples would be gratefully appreciated.
I am using jsp.
Make:<select>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="ford">Ford</option>
<option value="toyota">Toyota</option>
</select>
You could do it with some simple JS and css ( here is a JSFiddle: http://jsfiddle.net/N7Q57/1/)
Make:
<select name="cars" id="cars">
<option selected value="Choose">Choose</option>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Ford">Ford</option>
<option value="Toyota">Toyota</option>
</select>
<div id="brands">
<select class="audi">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select class="bmw">
<option value="3">3</option>
<option value="4">4</option>
</select>
</div
the jQuery
$("#cars").change(function () {
var string = "";
string = $("select#cars option:selected").text();
if (string == "Audi"){
$("#brands .bmw").hide();
$("#brands .audi").show();
$("#brands").show();
} else if (string == "BMW"){
$("#brands .audi").hide();
$("#brands .bmw").show();
$("#brands").show();
}
})
and the CSS:
#brands{
display: none;
}

Second HTML option load by default

In an HTML select element, is it possible to have the second option selected by default?
<select class="styled" onchange="location = this.options[this.selectedIndex].value;">
<option value="9u.html">Team 9u</option>
<option value="10u.html">Team 10u</option>
<option value="11u.html">Team 11u</option>
<option value="12u.html">Team 12u</option>
<option value="13u.html">Team 13u</option>
<option value="14u.html">Team 14u</option>
<option value="15u.html">Team 15u</option>
<option value="16u.html">Team 16u</option>
</select>
I would like the value "10u" to be in the select box when I load the page.
Use the selected attribute. Is google down?
<option value="10u.html" selected>Team 10u</option>