I have select. As you might see, text is different from value.
<select id="divPlatformsPopup" ClientIDMode="Static" runat="server" class="selectpicker col-md-12 ClassPad0" multiple title='Choose one of the following...' data-container="body" data-selected-text-format="count>2" data-style="btn-xs btn-default">
<option value="All">All Platforms</option>
<option value="Mobile Phone,Tablet,Windows Phone,PlayStation Certified Device,Windows 8 App,PlayStation Mobile">Mobile App/Tablet</option>
<option value="Nintendo DS,Nintendo DSi,Nintendo 3DS">Nintendo DS/DSi/3DS</option>
<option value="Playstation 3">Playstation 3</option>
<option value="PlayStation 4">PlayStation 4</option>
<option value="PSP,PS Vita">PlayStation Vita/PSP</option>
<option value="Wii">Wii</option>
<option value="Wii U">Wii U</option>
<option value="Linux,Macintosh,PC DVD,PC DVD-ROM,Windows CE,Windows PC,Windows 8 App">Windows/Mac</option>
<option value="Xbox 360">Xbox 360</option>
<option value="Xbox One">Xbox One</option>
<option value="3DO,Atari Jaguar,Atari Lynx,Cable Box,CDI,Dreamcast,DVD,Game Boy,Game Boy Advance,Game Boy Color,Game Gear,Game Wave(Custom DVD gaming platform),Game Cube,Gizmondo,Hyperscan,iPod,N-Gage,Neo Geo Pocket Color,Nintendo,Nintendo 64,Nintendo Game Boy,NUON,Online,Other,Palm Pilot,PDA(Palm, Win CE, etc.),PlayStation&2FPS one,Playstation 2,Plug-and-Play,Pocket Arcade,Pocket PC,Pokemon Mini,Sega 32x,Sega CD,Sega Dreamcast,Sega Genesis,Sega Pico,Sega Pocket Arcade,Sega Saturn,Super Nintendo,VG Pocket,Virtual Boy,Web Browser,Web Site,Web TV,Xbox,Zodiac,Firefox">Other Platforms</option>
</select>
And I have part of code to set selected values by value.
foreach (var li in platforms.Select(platform => divPlatformsPopup.Items.FindByValue(platform)))
{
li.Selected = true;
}
where platforms is list of selected values
But here is one case that i didn't count. It's possible to pass into platforms list value which is part of value from select (For example "Nintendo DS" as part of "Nintendo DS,Nintendo DSi,Nintendo 3DS").
And i want to know how to select item which contains some part of VALUE of select item.
Well, i find solution:
I goes in a loop for every item in Select and check if item contains some string
foreach (var platform in platforms)
{
for (var i = 0; i <= divPlatformsPopup.Items.Count; i++)
{
if (Array.IndexOf(divPlatformsPopup.Items[i].Value.Split(','), platform) > -1)
{
divPlatformsPopup.Items[i].Selected = true;
}
}
}
Related
I have a multi select drop down as follows:
<select id="country" class="form-select" multiple name="country[]">
<option selected value="">All</option>
<option value="1">UK</option>
<option value="2">USA</option>
<option value="3">Germany</option>
<option value="4">Australia</option>
</select>
So as you can see by default it would be the option 'All' which will be highlighted. What I am trying to do is to unselect the option 'All' if you select any other options.
Also if you select all the options then I just want to have the 'All' option selected.
Just to give an example, if I selected these following options:
All, UK, USA
Then it should be:
UK and USA
Another example would be, if I selected the following:
UK, USA, Germany and Australia
Then it should be :
All
If anyone could give me some advise how I could go about it, that would be great.
You can trigger the following function on change of select menu:
function _onCountrySelect() {
var _option = jQuery("#country").val();
if (_option[0] == "" && _option.length > 1) {
jQuery("#country").val(_option.slice(1));
}
if ((_option[0] != "" && _option.length == jQuery("#country option").length - 1)) {
jQuery("#country").val("");
}
}
$('#country').on('change', _onCountrySelect);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="country" class="form-select" multiple name="country[]">
<option selected value="">All</option>
<option value="1">UK</option>
<option value="2">USA</option>
<option value="3">Germany</option>
<option value="4">Australia</option>
</select>
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']." ";
}
I have a select field like this
<select name="user_code" >
<option value="001">Code 1</option>
<option value="002" selected>Code 2</option>
<option value="003">Code 3</option>
</select>
The default behaviour is, code 2 is being shown as default selection, and code 2 appearing also on the drop down list after clicking the select field.
I don't want the default selected option to be displayed on the drop down list. Is it possible?
Just to be complete, here another Version of achieving what you wanted with Javascript.
document.getElementById("user_code").selectedIndex = -1;
var value = 002;
alert("Selected option: " + value);
function change(select){
for (var i = 0; i<select.options.length; i++){
if (select.options[i].selected){
value = select.options[i].value;
}
}
alert("Selected option: " + value);
}
<select id = "user_code" name="user_code" onchange="change(this)">
<option value="001">Code 1</option>
<option value="002">Code 2</option>
<option value="003">Code 3</option>
</select>
I have 3 listboxes which displays same options. I want to disable the option in other two listboxes which is selected in a listbox. I want to let my User go any listbox first. Any help is appreciated.
If you have the following HTML:
<select id="select1">
<option value="">Choose</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<select id="select2">
<option value="">Choose</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<select id="select3">
<option value="">Choose</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
You can do this (with the help of jquery):
var previousValues = []
$selects = $('#select1, #select2, #select3');
$selects
.mousedown(function(e) {
// save the previous value for re-enabling it when you change
var val = $(this).val();
if (val) {
previousValues[this.id] = val;
}
})
.change(function(e) {
// get the other select elements
var $theOtherSelects = $selects.not('#' + this.id),
prevVal = previousValues[this.id],
val = $(this).val();
// re-enable the previously disabled option
if (prevVal) {
$theOtherSelects
.find('option[value=' + prevVal + ']')
.prop('disabled', false);
}
// if a value is selected, disble in the other selects
if (val) {
$theOtherSelects
.find('option[value=' + val + ']')
.prop('disabled', true);
}
})
.mousedown()
.change();
Here's jsfiddle for you to play with.
Note: I've used jQuery because it is much easier, will work cross-browser, and you did not specify you didn't want to use it explicitly.
You could set some unique property on each option (the value might be enough, otherwise class is a good choice) and use jQuery to select and delete one option from the other two when it is selected in one of the selects.
EDIT: Here's an example that does something along the lines of what you want. You'd have to modify it a bit yourself. Didier's answer may be closer to what you want, though.
http://jsfiddle.net/baByZ/39/
I want to change the select option selected to another value.
I.e.,
<select id="myid">
<option value="1" selected="selected">1 </option>
<option value="2" >2 </option>
<option value="3" >3 </option>
<option value="4" >4 </option>
</select>
I have to trigger a change in this select and select the 3rd option I have the value how can I do it.?
I am adding an option each time by a function and I want after each addition of the option, I want it to be selected to do further activities.
To change by index
<input type="button" value="Change Select" onclick="changeSelect(3)" />
function changeSelect(x) {
document.frm.myid.selectedIndex = x-1;
}
to change by value
<input type="button" value="Change Select" onclick="changeSelect1(3)" />
function changeSelect1(x) {
var myid = document.getElementById('myid');
var st = myid.options;
for(var i=0; i<st.length; i++) {
if(st[i].value == x) {
myid.selectedIndex = i;
}
}
}
function Change() {
for (i = 0; i < document.getElementById('ddStream').options.length; i++) {
if (document.getElementById('ddStream').options[i].value == 1)
document.getElementById('ddStream').selectedIndex = i;
}
alert(document.getElementById('ddStream').selectedIndex);
return false;
}
<select id="ddStream" onchange="return Change()">
<option value="">EEE</option>
<option value="">ECE</option>
<option value="">CSE</option>
<option value="1">E&I</option>
</select>
This is the basic syntax.. The other things that you have mentioned will go by the logic u write.. Eg, to select the last option that u add dynamically,
document.getElementById('ddStream').selectedIndex = document.getElementById('ddStream').options.length -1
selected="selected" selects the option you want, just put it on the 3rd option tag
E.g.
<select id="myid">
<option value="1">1 </option>
<option value="2">2 </option>
<option value="3" selected="selected">3 </option>
<option value="4">4 </option>
</select>