HTML Sortby using select option - html

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']." ";
}

Related

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

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>

Viewing short values of chosen options in multiselect

below I attached some piece of code from https://semantic-ui.com/modules/dropdown.html: (Multiple Selection)
<select name="skills" multiple="" class="ui fluid dropdown">
<option value="">Skills</option>
<option value="angular">Angular</option>
<option value="css">CSS</option>
<option value="design">Graphic Design</option>
<option value="ember">Ember</option>
<option value="html">HTML</option>
<option value="ia">Information Architecture</option>
<option value="javascript">Javascript</option>
<option value="mech">Mechanical Engineering</option>
<option value="meteor">Meteor</option>
<option value="node">NodeJS</option>
<option value="plumbing">Plumbing</option>
<option value="python">Python</option>
<option value="rails">Rails</option>
<option value="react">React</option>
<option value="repair">Kitchen Repair</option>
<option value="ruby">Ruby</option>
<option value="ui">UI Design</option>
<option value="ux">User Experience</option>
</select>
The question is:
Is it possible to show short names of chosen options ? I mean something like:
Options are: keyboard, mouse, monitor, laptop
After chosing options keyboard, mouse shown are: K, M
Is it possible to do it?
I am not familiar with angular or semantic, but it is fairly easy using vanilaJS. You are welcome to test this code on semantic-ui website. Choose to items in the multi-select section then run this in the console:
var items = document.querySelectorAll(".ui.label.transition.visible");
items.forEach(function(item){
var icon = document.createElement("i");
icon.className = "delete icon";
item.innerText = item.innerText[0];
item.appendChild(icon);
});
For sure to use it with angular you would like to modify my code but that is one possible approach.

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>

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>