I am working on a form that requires a drop-down menu to be populated based on the value of another that is completed by the user first.
The two selects are "subject" and "topic". When the subject is chosen, the "topic" drop-down menu should contain all of the topics within that subject. E.g. for "maths" subject "topic" should show algebra, shape etc.
How can I achieve this? The values for both selects are done in PHP. For the first select, it is a simple task of using a for loop to populaate the select but it seems as though JavaScript must be used for the second. How shall I go about this?
Thanks in advance,
Ilmiont
Assume that, your first select has 2 options:
<option value="math">math</option>
<option value="english">english</option>
So, you can load second select's option something like this:
<option value="math-a">math-a</option>
<option value="math-b">math-b</option>
<option value="english-a">english-a</option>
<option value="english-b">english-a</option>
where a & b is representing different topic. You can initially hide the second select's option using jQUery or CSS.
Then, just use jQuery to show specific option based on first select like this:
$('#sub').change(function(){
$('#topic option').css('display', 'none');
var value = $(this).val();
if(value){
$('#topic option').each(function(){
var topic = $(this).val();
topic = topic.split('-');
topic = topic[0];
if(value == topic){
$(this).css('display', 'block');
}
});
}
});
Working fiddle.
Hope this will works!
Related
My select box that is generated by PHP:
<select>
<option selected>Select something</option>
<option data-value="test"></option>
</select>
So far I have tried the following ways to retrieve the value within the data-value attribute:
$('select').children(":selected").data('value');
$('select option:selected').data('value')
$('select option:selected').attr('data-value');
$('select').find(':selected').data('value');
Of course there are a couple of more ways to do this. Once the one of these options gets executed I "sometimes" get the value within the data-value attribute. Even using
$('select').on('change', function () { // code });
gives me the same result. Am I missing some underlying thing?
FIXED:
After every select I use the data information for something else. Then I refresh the select box data by retrieving the remaining data information from the database. At that point I forgot to add the attribute data-value to every option..
I have a select list. I am using jQuery to update the selected item. The displayed item in the box isn't updating when I change the selected value. In the following example option "a" is set as selected. Then I use jQuery to change the selected item to "d". It still shows "a". However if you expand the list you can see that "d" is selected or highlighted. Not sure how to fix the issue. Any help would be appreciated!
http://jsfiddle.net/9wQcs/5/
Html:
<select id="t">
<option>select one</option>
<option id="a" selected="selected">a</option>
<option id="b">b</option>
<option id="c">c</option>
<option id="d">d</option>
</select>
jQuery:
$(document).ready(function () {
$('#d').prop('selected', 'selected');
});
Thanks,
Brian
First of all, refrain from using .ready() in jQuery Mobile.
When selecting an option programmatically, you need to re-ehance selectmenu widget.
$("#id").prop("selected", true);
$("select_id").selectmenu("refresh");
Demo
I hope that somebody can help me and I want to thank you all in advance for your help.
I have a php code that collects informations in one array made in this way:
$array_pages[$index][0]: menu id (it tells me in which menu I can find the page)
$array_pages[$index][1] : here I store the page name (without extension)
$array_pages[$index][2] : this field contains a string (with more informations about the page)
This multidimensional array is already built by my code.
Here's what I would like to do:
At the end of a page (where I have $array_pages) I would like to put two select menus:
<select name='themenu' style='width: 150px'>
<option value='1'> Menu number 1 </option>
<option value='2'> Menu number 2 </option>
<option value='3'> Menu number 3 </option>
</select>
In this select I would like to make the user choose a menu among the 3. The part where I am lost is the following:
I would like to add another next to the first one. This second select has to change its content according to the value of the first. Example:
If I choose Menu number 2 (value 2), the second select should display something like this:
<select name='thepages' style='width: 150px'>
<option value='$array_pages[$index][2]'> $array_pages[$index][1] </option>
<!-- ... -->
</select>
for each element in the array that has $array_pages[$index][0] = 2 (2 because it is the value of the first select). Is it possible to do it without refreshing the page?
I have tried to understand how to do something like this with javascript but I am lost and I ended up with nothing
I hope that I have explained well enough my problem... Please help! Thank you again!
The challenging part here is the interplay between JavaScript and PHP. Once the page is rendered and sent to the browser, the PHP code is finished. Everything else must be accomplished in JavaScript (unless you are doing some kind of post-back or AJAX model).
So you must make all the values completely available to the JavaScript code before the PHP is finished. Two ways you can accomplish this:
Create all possible second <select> with PHP, but hide all of them (style=display:none). Then the JavaScript would show/hide the appropriate second menu depending on the selection in the first.
Create a JavaScript array from the PHP array that JavaScript can use to populate the second submenu dynamically when the first menu option is selected.
The first option is probably simpler, at the expense of including extra HTML bloat in the response (shouldn't be a big deal if you only have a couple submenus). So you would have something like this following:
<select name='themenu' style='width: 150px' onchange='changesubmenu(this)'>
<option value='1'> Menu number 1 </option>
<option value='2'> Menu number 2 </option>
<option value='3'> Menu number 3 </option>
</select>
<select id="thepages1" style="display:none">
<option>...</option>
<option>...</option>
<option>...</option>
</select>
<select id="thepages2" style="display:none">
<option>...</option>
<option>...</option>
<option>...</option>
</select>
<select id="thepages3" style="display:none">
<option>...</option>
<option>...</option>
<option>...</option>
</select>
And your changesubmenu() JavaScript function would look something like this:
var tempid=''; // save previous id to hide it
function changesubmenu(parent) {
// get selected menu id
var id = parent.value;
var submenuid = "thepages"+id;
// show the selected menu
var submenuel = document.getElementById(submenuid);
if (submenuel) submenuel.style.display = "";
// hide the previously selected menu
var oldsubmenuid = "thepages"+tempid;
var oldsubmenuel = document.getElementById(oldsubmenuid);
if (oldsubmenuel) oldsubmenuel.style.display = "none";
// update old id for reference
tempid = id;
}
Demo: http://jsfiddle.net/NmKvK/
In my experience the best way to do so with javascript is to load all the possibilities onto the page showing only the ones you select (using javascript).
for example
select 1
select 2 hidden
select 3 hideen
in select 1 you chose option 1
select 1
select 2 showing
select 3 hidden
in select 1 you chose option 1
select 1
select 2 hidden
select 3 showing
If you have a LOT of content then you need to do this dynamically using ajax and a second php page (or you can use the same php file).
So when selecting option 1 it triggers an AJAX call (with a param that is option 1 value) that loads the content of, for example, content.php into a javascript variable and from there you can load it into a place holder after the first select.
Hope this helps!
For my code, my drop down lists are initiated on the original page, via
<select name =country id=country
onchange=showRecords(this.value,'country','province')>"
This function is taking the value, equating it to country, then querying MySQL, and setting the results where id=province, and creating cascading dropdown lists. This is obviously via Ajax.
So, when $_REQUEST['province'] is set, then the Province dropdown list gets populated with all provinces from the country to which it belongs, etc.; i.e.;
<?if(isset($province)){
echo "<script>showRecords('".$country."','country','province');</script>";}?>
However, for the life of me, I cannot figure out how I can set the default value equal to $_REQUEST['province']. I cannot use the traditional way:
if (($selected) == ($value)) {
$options.= " selected";
}
Because it is querying the AJAX page with one piece of information at a time.
Any ideas would be greatly appreciated.
Your code doesn't seem to make a lot of sense. The particular thing that worries me is that you say ajax is loading one item at a time?
Perhaps something like this. A country select tag like...
<select onchange="showRecords(this)">
As well as creating the javascript function showRecords() which will be called when someone chooses an option in the select tag.
<script>
function showRecords(calling_element) {
// do AJAX call here using calling_element.options[calling_element.selectedIndex].value as the selected country. this.value does not work for select tags.
}
</script>
the PHP page that receives this AJAXed request would reply with a JSON object containing all of the province values, or a delimited list.
once the Javascript showRecords function receives the responce from the PHP page, it would add each of these options to the correct select tag. Once finished, it would set the default value to whichever option it wants by something like the following:
target_element.selectedIndex = {desired list index here};
I have a lot of assumptions to your questions,
first is, if bydefault you have the select province like this
<select id="province">
<option value=""></option>
<option value="California">California</option>
<option value="Washington">Washingthon</option>
</select>
then you can use this script to default select
document.getElementById("province").value="Washington";
but if bydefault you have the select province like this
<select id="province"></select>
then you can use this script to default select
document.getElementById("province").innerHTML='<option value="Wahsington">Washington</option>';
so it depend on your code and your need. maybe if you have another case the problem should be solved in another way.
cmmiiw :)
I have a select list, currently I have it implemented then when the user selects an item, the I have some javscript that creates a li on the fly on the places on the page, the problem is that I want the user the be able to select multiple items from the list, however the javascript cannot cope with this, but I need this functionality so that when I submit the form the values of the selct list go into the post.
Currently my javascript looks like this,
$('#sector').change(function() {
var selected = $(this).val();
//alert(selected);
$('#selected_sectors').prepend('<li>'+selected+'</li>');
});
Is it is possible to get this each time the user ctrl+selects and item is creates the li but and keeps the values accesible in the post?
Possibly something like this is what you're looking for (note the :selected selector).
<select id="items" multiple size="5">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
<option value="grape">Grape</option>
</select>
<ul id="sel-items"></ul>
$('#items').change(function(e){
$('#sel-items').empty();
$(this).find(':selected').each(function(i,e){
$('#sel-items').append($('<li>').text($(e).val()));
});
});
Working Example
(Working on one now that checks for deltas between the <select> and the <ul>)