I would like a select list that does the following:
When the select list is open, display the list of descriptions.
When the user selects an item, the select list will close an only the value will be displayed.
The reason for this is to conserve space as the values will be much shorter. I'm hoping that there's an answer in jQuery.
Thanks.
Alright, I've worked it out:
$("#selectList").focus(function() {
var selectedOption = $(this).find("option:selected");
selectedOption.text(selectedOption.attr("description"));
});
$("#selectList").change(function() {
var selectedOption = $(this).find("option:selected");
selectedOption.attr("description", selectedOption.text());
selectedOption.text(selectedOption.val());
});
var currSelOption = $("#selectList").find("option:selected");
currSelOption.attr("description", currSelOption .text());
currSelOption.text(currSelOption .val());
It could probably be optimized a bit.
Related
I'm stuck right now on the following problem:
I have 2 dropdown menus next to each other, that both offer the same options to choose from (users can choose their travel route by choosing their point of departure and their destination).
The items on these dropdown menus are taken from a table in my database.
I want to achieve the following:
Locations "A", "B" and "C" are choosable as start or destination. When a user chooses "B" as point of departure (in the 1st dropdown menu), this option should not be shown anymore in the 2nd dropdown menu (destination). (EDIT: But it should reappear, when another option is selected in the 1st dropdown)
Same with "A" and "C" of course.
The code I use right now to fill the dropdown menus is:
<select name="anfang">
<?php
$sql = "SELECT * FROM orte";
$result = mysqli_query($dblogin,$sql);
while($zeilestart=mysqli_fetch_array($result))
{
include("includes/database.php");
$ortname=$zeilestart['name'];
$ortkurz=$zeilestart['kurz'];
echo "<option value=\"$ortkurz\">";
echo $ortname;
echo "</option>";
}
?>
</select>
This is the code for the 1st dropdown menu (start), the code for the 2nd menu is pretty much the same.
I assume that some JavaScript-code can solve my problem, but I don't really know how to do it... Can anyone help me? :)
Thanks and kind regards
weheri
The following code should be easy to understand - it basically queries the DOM for the first dropdown list's select element and the second dropdown lists' options elements. It attaches an event handler to the onchange event of the first select, so that whenever its value changes, the handler function is called to check all the options on the second select against the selected value. If the value matches, it sets a disabled attribute on the option, otherwise if the option has a disabled attribute (from a previous selection), it removes it.
You can add this to your page before the closing body tag, changing secondSelect to the name of your second dropdown.
<script>
var select1 = document.querySelector('select[name="anfang"]'),
secondList= document.querySelectorAll('select[name="secondSelect"] option');
select1.onchange = function(){
var selected = this.value;
for(var i=0;i<secondList.length;i++){
if(secondList[i].value==selected)
secondList[i].setAttribute('disabled',true);
else if(secondList[i].getAttribute('disabled'))
secondList[i].removeAttribute('disabled');
}
}
</script>
If you would like to hide the element altogether (instead of disabling it), you can to use the style attribute instead of disabled:
<script>
var select1 = document.querySelector('select[name="anfang"]'),
secondList= document.querySelectorAll('select[name="secondSelect"] option');
select1.onchange = function(){
var selected = this.value;
for(var i=0;i<secondList.length;i++){
if(secondList[i].value==selected)
secondList[i].style.display = "none";
else if(secondList[i].style.display == "none")
secondList[i].removeAttribute('style');
}
}
</script>
I was writing the code when I saw this already have been answered, but here is my contribution (full code example, using a php array to get the data from instead of a mysqli object/array)
http://pastebin.com/0J31FK15
I've doing some research about a problem I'm having with jQuery select2 plugin. The select2 sorts the selected items (no matter which order you choose them) when posting form. I know it may not be a select2 specific bug, but standard html select behaviour.
Now, how could I get the selected items IDs and then put them in a comma separated list in a hidden input so I can respect the order the items were chosen?
$("#formpacint").submit(function (event) {
var data = $('#campoprofesionales').select2('data');
$('#hidprofesionales').val(data);
});
The above code puts the selected items (in the order they were chosen) using its data property, into the hidden input, but the console.log shows them as objects (text+id I guess)..
I'd need to have: 35,14,29 (the ids of selected items as they were selected without sorting)
Thanks
Found a solution
var selections = (JSON.stringify($("#campoprofesionales").select2('data')));
var obj = $.parseJSON(selections);
$.each(obj, function() {
console.log(this.id);
// I here set a hidden field with the ids in the order they were selected
});
The other day, I was trying to figure out how to select all items in select2 v3.5.1 JavaScript multiselect control. I tried a few things, but I was having a difficult time figuring out how to do it. I just wanted to select every option in the box, but apparently select2 does not have a built-in option to select all of the items for you.
For select2 4.0.0
var selectedItems = [];
var allOptions = $("#IncludeFieldsMulti option");
allOptions.each(function() {
selectedItems.push( $(this).val() );
});
$("#IncludeFieldsMulti").val(selectedItems).trigger("change");
Here's a slightly more efficient version of the OP's answer:
var selectedItems = [];
var allOptions = $("#IncludeFieldsMulti option");
allOptions.each(function() {
selectedItems.push( $(this).val() );
});
$("#IncludeFieldsMulti").select2("val", selectedItems);
Or to make it more concise:
var selectedItems = $('#IncludeFieldsMulti option').map(function() { return this.value });
$("#IncludeFieldsMulti").select2("val", selectedItems);
Based on the discussion here: https://github.com/select2/select2/issues/195 it is possible to add a Select All button inside the dropdown list of options. Per that discussion, selecting too many at once can freeze the browser. Here I have added a functionality to disable the select all button if there are more that 25 options listed:
https://jsfiddle.net/hula_zell/50v60cm6/
To Select ALL
$("#IncludeFieldsMulti").select2("destroy");
$("#IncludeFieldsMulti").find('option').attr('selected',true);
$("#IncludeFieldsMulti").select2();
To Unselect ALL
$("#IncludeFieldsMulti").select2("destroy");
$("#IncludeFieldsMulti").find('option').attr('selected',false);
$("#IncludeFieldsMulti").select2();
This script is designed to map the location between two cubicles so that people in large office buildings can figure out where they need to go to get to that other person. I've almost got it...
I have two different dropdown menus I'm working with.
By default, the dots on the page display.
Each dot corresponds to a name on the dropdown list.
When you select the name under the first dropdown, the other dot will disappear, and then if you select the name under the other dropdown, the first one disappears.
What I want to happen is - When both names are selected from the dropdowns, then both dots are showing at the same time.
I can get one or the other, but not both.
Here's the JS I have to toggle between the two...
$('#mapMe').change(function() {
var selectedMeChoice = $('#mapMe option:selected').val();
if (selectedMeChoice == 'ALL'){
$('a.dot').slideDown(1000);
}else{
$('a.dot[mechoice = "'+selectedMeChoice+'"]').slideDown(1000);
$('a.dot[mechoice != "'+selectedMeChoice+'"]').slideUp(1000);
}
});
$('#mapThem').change(function() {
var selectedThemChoice = $('#mapThem option:selected').val();
if (selectedThemChoice == 'ALL'){
$('a.dot').slideDown(1000);
}else{
$('a.dot[themchoice = "'+selectedThemChoice+'"]').slideDown(1000);
$('a.dot[themchoice != "'+selectedThemChoice+'"]').slideUp(1000);
}
});
I think it has something to do with the slideUp/slideDown function, but I can't figure it out...
There's a jsfiddle here.
You aren't distinguishing between "them" and "me" in any way, so you're hiding the other one which should be shown. Try something like this, to only hide the correct dots:
$(".me").removeClass("me");
$('a.dot[mechoice = "'+selectedMeChoice+'"]').addClass("me").slideDown(1000);
$("a.dot").not(".me, .them").slideUp(1000);
http://jsfiddle.net/XvHJS/10/
In this way you will hide only a previous "me" and not hide everything, including an active "them".
$('a.dot[mechoice != "'+selectedMeChoice+'"]').slideUp(1000);
Is also removing those which have no memchoice at all, including those with themchoice.
I would suggest using different classes dotme and dotthem instead.
I have two select with the same elements (options) in it.
What I am trying to do is that when the user select a value from the first select box, the second select box hides that option, and automatically select the first visible option if the selected option was the same as the one in the first select.
I know that :first selects the first element of a group of "objects", and that :visible only select the "visible" ones, so i was thinking that using :first of :visible should work, but what I am getting is no selection at all.
if I remove the :visible it works unless the second select box has the first element selected, and the user selects the first element on the first select box
This is what I have so far, please keep in mind that I have tried :first and :visible in any combination, but I really think that the problem here is that "hide hasn't finished its job when I use :visible
$('#style_position').change(function(){
var sel_pos_id = $(this).val();
var sel_xtr_pos_id = $('#style_position_extra').val();
$('#style_position_extra option[value=' + sel_pos_id + ']').hide().siblings().show();
if(sel_pos_id==sel_xtr_pos_id){
$('#style_position_extra option')
.removeAttr('selected')
.filter(':visible') //I also tried find(':visible')
.filter(':first') //I also tried find(':first')
.attr('selected','selected');
}
});
Here's one method
/* cache a set of options from second select*/
var $opts=$('#style_position_extra option').clone();
$('#style_position').change(function(){
var sel_pos_id = $(this).val();
/* find matching option copy*/
var $newOpts=$opts.filter(function(){
return this.value !=sel_pos_id;
}).clone();
/* replace exisiting options with match*/
$('#style_position_extra').html( $newOpts);
});
Here's another possibly simpler one
$('#style_position').change(function(){
var selected=$(this).find('option').not(':selected').clone();
$('#style_position_extra').html(selected);
});
Thanks to charlietfl I figured out, here is the final answer:
$('#style_position').change(function(){
var sel_pos_id = $(this).val();
var sel_xtr_pos_id = $('#style_position_extra').val();
var selected=$(this).find('option').not(':selected').clone();
$('#style_position_extra').html(selected)
if(sel_pos_id!=sel_xtr_pos_id){
$('#style_position_extra option[value=' + sel_xtr_pos_id + ']').attr('selected','selected');
}
});
This code will automatically select a different option if the two selects have the same option, or it will keep the same option selected in the second selectbox