I'm making a learning management system for the students. On the signup page I'm asking the student to tell me how many number of courses you're enrolling in this semester so that according to that i give him the number of list of teachers to save to his subject.
The below jquery code is running okay and updating the values when the student wants to select a subject. But i need something more accurate. This code only shows the number of lists that are pre written in it. I want to make it dynamic that if the student selects taking '2' courses then only two of these list items should show up there. Any body can help?
The jquery and html code is
<select name="select1" id="select1">
<option value="1">Semester 1</option>
<option value="2">Semester 2</option>
<option value="3">Semester 3</option>
<option value="4">Semester 4</option>
</select>
<select name="select2" id="select2">
<option value="1">name of Subject 1 from semester 1</option>
<option value="1">name of Subject 2 from semester 1</option>
<option value="1">name of Subject 3 from semester 1</option>
<option value="2">name of Subject 1 from semester 2</option>
<option value="2">name of Subject 2 from semester 2</option>
<option value="2">name of Subject 2 from semester 2</option>
<option value="3">name of Subject 1 from semester 3</option>
<option value="3">name of Subject 1 from semester 3</option>
<option value="4">name of Subject 1 from semester 4<option>
</select>
and
$("#select1").change(function() { if($(this).data('options') == undefined){
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options',$('#select2 option').clone());
} var id = $(this).val(); var options = $(this).data('options').filter('[value=' + id + ']'); $('#select2').html(options); });
For speedy checking you can see the running code here on JSFiddle
Related
Basically, I have two dropdown lists on my page, both query the same database to populate themselves. What I want is for a use to be able to select an item in one of the dropdown lists, and then for the second dropdown list to show every other option except for what the user selected in the first dropdown list.
I don't want the page to be refreshed in the process, and I want to avoid Sessions/Cookies if possible.
The easiest way I can think to do this is by setting a variable when the user selects a thing in one of the lists, but I can't for the life of me figure out how to do this.
HTML sample
<select id="select1" >
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select id="select2" >
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Javascript
$("#select1").change(function() {
var val = $(this).val();
$('#select2').children('option[value="' + val + '"]').attr('disabled', true);
// or
$('#select2').children('option[value="' + val + '"]').remove();
})
JSFIddle sample
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).
I have a form that a user completes to join a chat room, wasn't ever a problem as we only had it to be able to join a single chat room but now we've provided multiple options like
<option value="#Chat1">Chat 1</option>
<option value="#Chat2">Chat 2</option>
<option value="#Chat3">Chat 3</option>
<option value="#Chat4">Chat 4</option>
Later on I have
params.autojoin = "<? echo $_POST['channel']; ?>";
How can I change this so that it is every selected channel seperated by a comma i.e. #Chat1,#Chat3?
Thanks
HTML
<select name="chatRoom[]" multiple="multiple">
<option value="#Chat1">Chat 1</option>
<option value="#Chat2">Chat 2</option>
<option value="#Chat3">Chat 3</option>
<option value="#Chat4">Chat 4</option>
</select>
PHP
$selectChatRoom = implode(",",$_POST['chatRoom']);
params.autojoin = "<? echo implode(',',$_POST['channel']); ?>";
Edit:
As others have commented, my solution assumes you have correctly set up your select like:
<select multiple name="channel[]">
You might already have this; no way to tell if you don't provide the code ;)
It should work:
set name of the select as name="channel[]"
params.autojoin = "<?php echo isset($_POST['channel']) && is_array($_POST['channel']) ? implode(',', $_POST['channel']) : ''; ?>";
i have a select list menu that i use in my email form:
<select name="orgSelect" class="orgSelect">
<option value="0">----Select product----</option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
</select>
But when the email form is sent its posts the value and I don't want him to get the value, but yes the item label in front "Product 1"..., the Value of the options is using ofr another thing, can someone tell me how to get the data "Product 1" or Product 2...
Either don't use the value= attribute at all, which will have the client send the name of the option instead (but you don't get the actual number (guessing this is ID) of the product).
Or, a better solution, query your database for the product ID before sending the email, and get the Product name from there.
you set like this
<select name="orgSelect" class="orgSelect">
<option value="0-0">----Select product----</option>
<option value="1|Product 1">Product 1</option>
<option value="2|Product 2">Product 2</option>
<option value="3|Product 3">Product 3</option>
</select>
and get post value like this
var arr=explode('|',$_post['orgSelect']);
var arrval=arr[0];
var arrname=arr[1]
i have a 2 types of select list menus:
<select name="category">
<option>----Select----</option>
<option>Category 1</option>
<option>Category 2</option>
<option>Category 3</option>
<option>Category 4</option>
</select>
<select name="category_product">
<option>----Select----</option>
<option>Product of category 1</option>
<option>Product of category 1</option>
<option>Product of category 1</option>
<option>Product of category 1</option>
</select>
What i liked to to is when i choose "Category 1" of the select list menu, it echos the select list menu "category_product", how can i do this?
I was thinking in put the category_product list menu in a variable, and when i chose a category it echo´s the category_products list menu, but i dont no how to make this detect when the category is chosen.
Hope for some help
Your only way is doing this with JS or jQuery, here is en example doing it with JS,
function showProducts(cat){
document.getElementById(cat).style.display = 'block';
}
<select name="category" onchange="showProducts(this.value)">
<option>----Select----</option>
<option value="category_product">Category 1</option>
<option>Category 2</option>
<option>Category 3</option>
<option>Category 4</option>
</select>
<select style="display:none" id="category_product" name="category_product">
<option>----Select----</option>
<option>Product of category 1</option>
<option>Product of category 1</option>
<option>Product of category 1</option>
<option>Product of category 1</option>
</select>
Or another option what you have to make an AJAX call if you want the result should be straight from the database.
UPDATE:
Use this function instead of the above,
function showProducts(cat){
for(var i=1;i<document.getElementsByTagName('select').length;i++){
document.getElementsByTagName('select')[i].style.display = 'none';
};
document.getElementById(cat).style.display = 'block';
}
You can play around with it let me know for any further help.