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>)
Related
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!
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!
I just want to make sure I'm on the right track at the moment:
Made a little thing so an admin can edit people's schedules. Right now he clicks on a row and all the schedules become editable. If he changes values in a row I'm catching it with
$('.selector').change(function() { // this happens to be a <select> dropdown. I guess technically this is the <option> inside of the select.
var updates = new Array(); // an array of all the updates
var classList = $(this).attr('id').split(/\s+\); // the id of a <select> would be something like "12 monday start" meaning the user_id, day_of_week, start/end time. Just converting it to an array here.
classList.push($(this).val()); // the time it has been changed to
updates.push(classList); // add the singular time update to the overall array
$('.save_schedule').click(function() {
// here I would iterate through all of the arrays in updates and do some sort of ajax call, correct?
});
});
Just want to make sure that I'm on the right track before I go any further and have to potentially rewrite things.
Thanks
My HTML since it has been requested: https://gist.github.com/2435293
if your HTML looks somehow like this
<select id="12 monday start" class="selector">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="12 monday end" class="selector">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="button" class="save_schedule" value="save" />
your javascript could look like this
$('.save_schedule').click(function() {
var arr = new Array();
$('.selector').each(function() {
arr.push($(this).attr('id').split(/\s+/));
arr.push($(":selected", this).val())
});
alert(arr);
// ajax call here
});
see jsfiddle example
I can think of two ways to implement this:
OPTION 1 - draft saving
Each time the user edits a row, you make an AJAX call to temporary save his changes (add a database column draft to distinct drafts from real changes).
You should move the click handler outside the change handler:
$('.selector').change(function() {
...
});
$('.save_schedule').click(function() {
...
});
In the change handler, $(this) points to the current tag select.
To get the selected value, you can use $(this).val().
To avoid splitting the select id attribute to get all the elements you need, you can use custom attributes:
<select data-user-id="12" data-day="monday" data-time="start">...</select>
Then, in your change handler, you can use the attr method to get their values.
var user_id = $(this).attr('data-user-id');
var day = $(this).attr('data-day');
var time = $(this).attr('data-time');
Now, you can make an ajax call to store the changes as draft.
When the user clicks on save_schedule, make a final ajax call to update the status of the drafts and set it to permanent.
OPTION 2 - simple save, form serializing
All changes are saved only when the user clicks on save button.
I would recommend to keep all the data in HTML tags and not in Javascript. (for reasons like: What happens if the user edits twice a schedule? Are the changes pushed again in the array?).
You could hide the inputs/selects when they are not editable and you won't need to treat the change event anymore.
When the user clicks on save_schedule, you can use a function like $(form).serialize() to gather all the data from your inputs (http://api.jquery.com/serialize/) and make an AJAX call to save your changes.
I have a select list like such:
<select name="taxonomy[1][]" multiple="multiple" class="form-select" id="edit-taxonomy-1" size="7">
<option value="13">Glaciers</option>
<option value="14">Lake Ice</option>
<option value="17">Permafrost</option>
<option value="16">River Ice</option>
<option value="15">Sea Ice</option>
<option value="12">Snow</option>
</select>
This list is being dynamically created and I'm not sure how to change the output display. I have seen tutorials like this: http://www.netvivs.com/convert-regular-select-into-a-drop-down-checkbox-list-using-jquery/ which convert a select into a dropdown check list. Is there a way using php,javascript,jquery, to convert the select to display as a checklist? Preferably in table form so I get 2 rows with 3 columns?
You could do it in a custom way like so:
$('#edit-taxonomy-1').parent().append('<table id="checkboxes"><tbody><tr></tr></tbody></table>');
$('#edit-taxonomy-1 option').each(function() {
var label = $(this).html();
var value = $(this).attr('value');
$('#checkboxes tbody tr').append('<td><input type="checkbox" value="'+value+'">'+label+'</td>');
});
Or just use the plugin: http://code.google.com/p/dropdown-check-list/
Looks like the example link does it using jquery...
Just make sure you have a source to jquery.js library, as well as a source to the library that site has offered as a download.
Then just call,
$("#edit-taxonomy-1").dropdownchecklist();
I havent tried it, but thats what the tutorial says to do...
Good luck.
PS - I had a hard time trying to find the download of the actual library from that site, so here it is. http://code.google.com/p/dropdown-check-list/