This question already has an answer here:
exclude value from one select box based on value of other selectbox
(1 answer)
Closed 9 years ago.
I have 2 selects (a,b). Same data in both select.
I want that when I choose an option in one of them, the same option disapear in the second one. If a reselect an other option, the one tha disapeared should reappears
tx
check here http://jsfiddle.net/RTzwL/
html
<select id="first">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
<option value="australia">Australia</option>
</select>
<select id="second">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
<option value="australia">Australia</option>
</select>
Javascript
$('select').change(function() {
$(this).siblings('select').find('option').attr({disabled:false});
var thisIndex = parseInt($(this)[0].selectedIndex)+1;
$(this).siblings('select').find('option:nth-child('+thisIndex+')').attr({disabled:true});
});
Related
I have a small Project website that I am learning to code with and in this website there is a Select Dropdown Menu of Music Genres
Here is a Video to help you visualise whats happening.
youtu.be/t4cJ7TCHiN8 (of the Problem)
And another video of how I can Paste "House" into the URL and get different MYSQL results
youtu.be/zf0S9WadQXo
I select a genre post the form and the reload shows me the results.
The value of the selected Option is then automatically selected by Jscript
So the Search area and its Values remain the same as before.
I have Mainly used DocumentGetElementById or jQuery to Select the value, and I am echoing PHP variables into the DocumentGetElementById function.
There is no problems with 99.9% of the values and selectable genres, they all are automatically selected without any problems.
Just 1 Problem, The value "House" Will not select.
No matter how I try it just will not select. I have of course tried other methods, including jQuery and no matter how I alter my code or method of execution.
Nothing seems to make the value "House" populate.
Here is the code. And images to help visualise the problem.
Thank you for any help you may provide.
CODE.
<select id='genregrab' name='genre' class='menusmall'>
<optgroup label='Genre'>
<option value="">All Genres</option>
<option value="EDM">EDM</option>
<option value="DnB">DnB</option>
<option value="Drum">Drum And Bass</option>
<option value="Breakbeat">Breakbeat</option>
<option value="Downtempo">Downtempo</option>
<option value="Dance">Dance</option>
<option value="Pop">Pop</option>
<option value="Disco">Disco</option>
<option value="Nu-Disco">Nu-Disco</option>
<option value="House">House</option>
<option value="Hard">Hard House</option>
<option value="Tech">Tech House</option>
<option value="Techno">Techno</option>
<option value="Deep">Deep House</option>
<option value="Future">Future House</option>
<option value="Tribal">Tribal House</option>
<option value="Tropical">Tropical House</option>
<option value="Progressive">Progressive</option>
<option value="Bass">Future Bass</option>
<option value="Bounce">Future Bounce</option>
<option value="Industrial">Industrial</option>
<option value="Electronic">Electronic</option>
<option value="Psychedelic">Psychedelic</option>
<option value="Trance">Trance</option>
<option value="Psy">Psy Trance</option>
<option value="Minimal">Minimal</option>
<option value="Ambient">Ambient</option>
<option value="Chillout">Chillout</option>
<option value="Synthwave">SynthWave</option>
<option value="Retro">Retro</option>
<option value="Hip">Hip-Hop</option>
<option value="Trip">Trip-Hop</option>
<option value="Glitch">Glitch-Hop</option>
<option value="Rap">Rap</option>
<option value="Afrobeat">AfroBeat</option>
<option value="Grime">Grime</option>
<option value="Trap">Trap</option>
<option value="Trapstep">TrapStep</option>
<option value="Dubstep">DubStep</option>
<option value="Drumstep">DrumStep</option>
<option value="Reggea">Reggea</option>
<option value="RnB">RnB</option>
<option value="Rock">Rock</option>
<option value="Metal">Metal</option>
<option value="Soul">Soul</option>
<option value="Country">Country</option>
<option value="Folk">Folk</option>
<option value="Jazz">Jazz</option>
<option value="Blues">Blues</option>
<option value="Funk">Funk</option>
<option value="World">World</option>
<option value="Gospel">Gospel</option>
<option value="Latin">Latin</option>
<option value="Ethnic">Ethnic</option>
<option value="Bollywood">BollyWood</option>
<option value="Moombahton">Moombahton</option>
<option value="Orchestral">Orchestral</option>
<option value="Classic">Classical</option>
<option value="Cinematic">Cinematic</option>
</optgroup>
</select>
Item Selected & POSTs Picked up By JScript to re-select the option
$(function(){
var genre = document.getElementById('genregrab');
var genredata = "<?php echo $genre ?>";
genre.value=genredata;
});
(Of course i initially tried the following)
document.getElementById("genregrab").value="<?php echo $genre ?>";
However unlike the others , the word "House" will not be selected.
I think its to do with the word or something, as every other word will work fine.
Same process just selecting another genre, and it works fine
As you can see , the Trance genre was selected
Just the word "House" has the problem.
And the Result after the Jscript
However , Select any other word and it works
As you can see in the image below
Any Ideas , Anybody?
I forgot to add the below code , from the GET and the MYSQL Results.
Its possible the sanitizing is effecting the variables.
The GET
if (isset($_GET['genre'])) {
$genre=$_GET['genre'];
$genre = filter_var($genre, FILTER_SANITIZE_STRING);
$genre = strip_tags($genre);
$genre = str_replace(['"',"'"], "", $genre);
} else {$genre="";}
And the MYSQL variable - Which also gets posted to the URL for GET
$genre=$row['genre'];
$genre = str_replace(['"',"'"], "", $genre);
if ($genre == "null" | $genre==" "){$genre="";}
$genresend = explode(',',trim($genre))[0];
This question already has answers here:
What is the difference between client-side and server-side programming?
(3 answers)
Closed 8 years ago.
Is it possible to trigger an event on selected option without submitting form?
<h3 id="center" align="center">OUR SITE CAN ONLY PROVIDE YOU INFO ABOUT MANTIONED COUNTRIES</h3>
<SELECT style="padding:10px;margin-left: 550px;margin-top: 20px;">
<option name="india">India</OPTION>
<option name="pakistan">Pakistan</OPTION>
<option name="US">UNITED STATE</OPTION>
<option name="UK">UNITED KINGDOM</option>
</SELECT>
You can't do that with PHP (since it's server side language). Use js/jQuery for that.
$(document).ready(function() {
$("#dropdown").change(function() {
alert("Selection: " + $("option:selected", this).val() + ":" + $("option:selected", this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 id="center" align="center">OUR SITE CAN ONLY PROVIDE YOU INFO ABOUT MANTIONED COUNTRIES</h3>
<select id="dropdown" name="countries" style="padding:10px;margin-left: 550px;margin-top: 20px;">
<option value="india">India</option>
<option value="pakistan">Pakistan</option>
<option value="US">UNITED STATE</option>
<option value="UK">UNITED KINGDOM</option>
</select>
Also, name attribute is for select not for option. Check snippet markup changed.
Because you requested for a javascript example. Here is an example of a javascript variant.
<select onchange="jsFunction(this)">
<option value="" disabled selected style="display:none;">Label</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script>
function jsFunction(select)
{
alert(select.options[select.selectedIndex].value);
}
</script>
you cant do that with php but can be done using Javascript/Jquery as #S.Pols said
$(document).ready(function() {
$('body').on("change","#select",function(){ // select is the id of your select tag
alert("selected");
});
});
I want a form to have multiple drop down selects that change based on the previous selection. This is how I want it to work.
<select id="format">
<option selected="selected" value="NULL">-- Select a product Format --</option>
<option value="PS3">PS3</option>
<option value="Xbox 360">Xbox 360</option>
<option value="Wii U">Wii U</option>
</select>
So if you select PS3 you are then faced with more options for PS3 product type
<select id="ps3-product-type">
<option selected="selected" value="NULL">-- Select a product PS3 product type --</option>
<option value="chargers">chargers</option>
<option value="controllers">controllers</option>
<option value="headsets">headsets</option>
</select>
So then you select headsets for example and you get another set of final options of products
<select id="ps3-headsets">
<option selected="selected" value="NULL">-- Select a PS3 headset --</option>
<option value="product-1">product 1</option>
<option value="product 2">product 2</option>
<option value="product 3">product 3</option>
</select>
How can I do this with jquery or PHP? Please bare in mind that I will also have selects for Xbox 360 and Wii U too.
UPDATE PROGRESS:
http://jsfiddle.net/maximus83/r7MN9/639/
Here is my HTML, I have got the first set of arrays working for selecting product type, But I cant get the 3rd box working, I need 3rd box to say the product, where do I go from here.
<select id="cat">
<option val="PS3">PS3</option>
<option val="Xbox360">Xbox360</option>
<option val="WiiU">WiiU</option>
<option val="Multiformat">Multiformat</option>
</select>
<select id="item">
</select>
<select id="product">
</select>
Here is my script
PS3=new Array('Headsets(PS3)','Controllers(PS3)','Chargers(PS3)','Cables(PS3)');
Xbox360=new Array('Headsets(360)','Chargers(360)');
WiiU=new Array('Controllers(WiiU)','Headsets(WiiU)');
Multiformat=new Array('Headsets(Multi)','Chairs(Multi)','Cables(Multi)');
populateSelect();
$(function() {
$('#cat').change(function(){
populateSelect();
});
});
function populateSelect(){
cat=$('#cat').val();
$('#item').html('');
eval(cat).forEach(function(t) {
$('#item').append('<option val="#item">'+t+'</option>');
});
}
This should do the trick for you. It's a previously answered thread on the exact same topic - how to populate a drop down based on the value in another. It takes advantage jQuery (And I've used it before myself as reference).
This question already has answers here:
Using Ajax, jQuery and PHP in two dropdown lists
(2 answers)
Closed 8 years ago.
I was making a dropdown switch. I mean when I choose an option of the first drop down the second will show specified message preset's in stead of the first.
**Dropdown one**
<select name="bantype">
<option value="user">User ban</option>
<option value="ip">IP ban</option>
<option value="system">System ban</option>
</select></br></br>
**Dropdown two**
<select name="reason">
<option value="Sexual harassment">Sexual harassment</option>
</select>
How can I make that when I select an option from the first dropdown that the option values of the second will switch?
Thank you for help
It's called hierselect, chained or related selects.
I like this jquery plugin: http://www.appelsiini.net/projects/chained
So you have predefined values for each dropdown value from first list
<select id="first">
<option value='ban' data-show="#optionsOne">Ban Ban</option>
<option value='banAll' data-show="#optionsTwo">Ban All</option>
</select>
And you have other (hidden) dropdown for each of your options:
<select id="optionsOne" class='drop'>...</select>
<select id="optionsTwo" class='drop'>...</select>
When #first changes values, show relative dropdown:
$('#first').change(function(){
$('.drop').hide(); // hide all dropdowns
id = $('option:selected', this).data('show'); // take relevant id
$(id).show(); // show that dropdown with above id
});
Call javascript function event onchange,
<select name="bantype" onchange="getoptions(this.value);">
<option value="user">User ban</option>
<option value="ip">IP ban</option>
<option value="system">System ban</option>
</select><br/><br/>
<select name="reason" id="reason"></select>
In your function, use following
getoptions(val) {
if(val == 'user') {
var your_options = '<option value="abc">Abc</option>';
jQuery('#reason').html(your_options);
jQuery('#reason').show(); // if second dropdown is hidden
}
}
If you have a fixed option on page load, then here is one way to achieve what you want.
Give a relation between first select and the second one, like this:
<select name="bantype">
<option value="user">User ban</option>
<option value="ip">IP ban</option>
<option value="system">System ban</option>
</select></br></br>
**Dropdown two**
<select name="reason">
<option class="user" value="a">a</option>
<option class="user" value="d">d</option>
<option class="ip" value="b">b</option>
<option class="system" value="c">c</option>
</select>
Use jQuery to show and hide the option, like this
$("select[name='reason'] option").each(function(){
$(this).hide();
});
$("select[name='bantype']").on("change", function(){
var selected = $(this).val();
$("select[name='reason'] option").each(function(){
if($(this).prop("class") != selected){
$(this).hide();
}else{
$(this).show();
}
});
});
Check out this DEMO..
This question already has answers here:
Removing an item from a select box
(16 answers)
Closed 9 years ago.
Does anyone knows how to remove multiple options from form drop down? I want to read data from database, and depending on its value remove some options.
<select name="year">
<option value="1">First year/option>
<option value="2">Second year</option>
<option value="3">Third year</option>
</select>
After I read data from the database, I would like to remove some values based on the data's value. So if the data value is 3, I want to remove values 1 and 2 from thr drop down list..
You can use filter() to filter out elements on custom conditions.
Live Demo
$('[name=year] option').filter(function(){
return this.value != '3'
}).remove();
or
Live Demo
$('select :not(option[value=3])').remove();
Edit based on comments, to filter elements have values less then given value.
Use < operator instead of == then and treat the value as number instead of string,
$('[name=year] option').filter(function(){
return parseInt(this.value) < 3
}).remove();
All you have to do is have 2 sections of the same dropdown box. Inside the sections you need to dynamically generate the options omitting the ones which you do not need.
if($data_from_db){
<select name="year">
<option value="1">First year/option>
<option value="2">Second year</option>
</select>
}
else{
<select name="year">
<option value="1">First year/option>
<option value="2">Second year</option>
<option value="3">Third year</option>
</select>
}
You can use something like this
$("select option[value!='3']").remove();