We Keep Coding

text box contents from multiple list box selection

I want to populate the selection from multiple list boxes to a single text box.
I've played around with it a bit but I'm still having trouble getting it to work
Many Thanks Brian

#Brian Lee
I have done a simple example. Please check this: http://plnkr.co/edit/sAEn6iBkwmZuWq56yHVT?p=preview
Created three set of <select> and a <textarea>. On change of select, updated textarea :
$("select").on("change", function() {
$("textarea").val( $("textarea").val() +' '+ $(this).find("option:selected").val() );
})

How to set the value of a select box when it is enabled only?

I have a top level select box that when a user makes a selection here, I want this value to be used for all the below select boxes relating to this top level box.
The problem I am having is that, if any one of the lower select boxes is disabled, I want the above process to ignore this select box as it has already been assigned a value.
Obviously, if the lower select box is enabled then I want to assign the top select value to it.
To disable the select list based on a particular value, I have used:
$("select[name=f03]").eq(index).attr('disabled', 'disabled');
Here is the jQuery that I have used but is not working:
var top_select = $("select[name=f07]").val();
$("select[name=f03]").each(function(index){
if $("select[name=f03]").eq(index).is(':enabled'){
$("select[name=f03]").eq(index).val(top_select);
}
});
From this code, it is the lower selects ([name=f03]) that I am trying to set only when it is enabled.

First I would disable select like this:
$("select[name=f03]").eq(index).prop('disabled', true);
Second, your function should be much simpler:
$("select[name=f03]").each(function(){
if ($(this).prop('disabled')) return;
$(this).val(top_select);
});

you should use jquery :enabled selector as follow
$("select[name=f03]:enabled").each(function(){
//execution
});
or
$("select[name=f03]:enabled").val("value");
here is jsfiddle example http://jsfiddle.net/kso2oqr5/1/

When you are disabling elements use .prop(property,value)
var top_select = $("select[name=f07]").val();
$('select[name="f03"]').val(function(){
if(!this.disabled){
return top_select;
}
});
DEMO

custom select box- when selecting option value, show corresponding data-image as selected value

for this custom select box, what needs to be done to display an image which is associated to an option value in the select box placeholder.
http://jsfiddle.net/6eCFz/
in this code, how to use the data-attribute, first, to show an image associated with an option value as the selected value and second, to display tick marks when dropdown is opened to indicate the selected value.
Additionally, there are minor bugs:
a code for unique selection, for two select box filled with same options, does not seem to work.
$("#c_id1").change(function(){
$("#c_id2 option:hidden").show();
if($(this).val().length ){
$("#c_id2 option[value=" + $(this).val() + "]").hide();
}
});
$("#c_id2").change(function(){
$("#c_id1 option:hidden").show();
if($(this).val().length ){
$("#c_id1 option[value=" + $(this).val() + "]").hide();
}
});
http://jsfiddle.net/73epV/ - (vanilla script as proof-of-concept)
also, it does not ensures uniqueness onLoad
after triggering the dropdown, if mouse is moved away without first hovering over the option list, the dropdown does not close.
lots of love for any help :)
thanks

change name of dynamically added select option element

I am dynamically generating some dropdowns and then allowing them some of those to be removed on board dyanmically. so that time, i have encountered an error of selection option (dropdown) elements id mismatch. something like below is.
newly added dropdowns.
select name="CSSAtapsClient[client_time_window_arr][0]" id="client_time_window_0">/select>
select name="CSSAtapsClient[client_time_window_arr][1]" id="client_time_window_1">/select>
select name="CSSAtapsClient[client_time_window_arr][2]" id="client_time_window_2">/select>
select name="CSSAtapsClient[client_time_window_arr][3]" id="client_time_window_3">/select>
after i dynamically remove them via javascript. (lets say i am removing the second one) so then new ones will be displayed as followings,
select name="CSSAtapsClient[client_time_window_arr][0]" id="client_time_window_0">/select>
select name="CSSAtapsClient[client_time_window_arr][2]" id="client_time_window_2">/select>
select name="CSSAtapsClient[client_time_window_arr][3]" id="client_time_window_3">/select>
So now the issue i have is, the names of the dropdowns are like this, (0,2,3)
CSSAtapsClient[client_time_window_arr][0],
CSSAtapsClient[client_time_window_arr][2],
CSSAtapsClient[client_time_window_arr][3]
So this is causing an error for me and i need to reorder this name and make it be like this, (0,1,2)
CSSAtapsClient[client_time_window_arr][0]
CSSAtapsClient[client_time_window_arr][1]
CSSAtapsClient[client_time_window_arr][2]
how can i simply rename these dropdowns name attribute (from 0 to how much ever dropdows are exisiting) ? appreciate an early reply
EDIT 1
I tried this, but didnt work.
$('#tbl_dynamic_call_dates select').each(function(i){
$(this).attr('name',"CSSAtapsClient[client_time_window_arr][i]");
});

You can simply reset the values using .attr() method:
$('#tbl_dynamic_call_dates select').attr('name', function(i) {
return 'CSSAtapsClient[client_time_window_arr]['+ i +']';
});

I did this,
$('#tbl_dynamic_call_dates select').each(function(i){
$(this).attr('name',"CSSAtapsClient[client_time_window_arr][" + i + "]");
});

Jquery Multiselect doesn't scroll to selected option

I'm using JQuery Multiselect plugin from here: http://www.erichynds.com/blog/jquery-ui-multiselect-widget
When the list of options is long a scroll appears, but it doesn't scroll automatically to the selected option. It means that, after selecting the 50th option, if I want to select option 51st I have to search again all the way down.
Do you know how to solve this issue? I tried to use scrolltTop but no luck.
The code is really simple...
$(function(){
$("select").multiselect({multiple: false, selectedList: 1});
});
Here is a jsfiddle with this problem: http://jsfiddle.net/g5r92/1/
Thanks a lot in advance.

have a look at this, first attempt and it´s working fine
http://jsfiddle.net/g5r92/7/
$(function(){
$("select").multiselect({multiple: false, selectedList: 1});
$('.ui-multiselect').click(function(){
$('.ui-multiselect-checkboxes').animate({
scrollTop: $(".ui-multiselect-checkboxes .ui-state-active").offset().top
}, 2000);
});
});
you will only need to fit it to your needs, add some extra pixels to the offset and it will scroll the selected option in the middle instead of the very top

You are right, it works indeed. My problem was because I have more than one multiselect in the same page, so offset().top was always zero for any multiselect except the first one (and I hadn't noticed that it was not zero for the first one...). Solved with this:
$('.ui-multiselect-checkboxes').scrollTop($($('.ui-multiselect-checkboxes .ui-state-active')[index]).offset().top);
Where index is the index of multiselects in the page.
Thanks a lot!

I would suggest, to edit your "jQuery MultiSelect UI Widget 1.12" JS file,
to "auto-select" while opening the menu option.
on your file, search for: (always select first item)
this.labels.eq(0).trigger('mouseover').trigger('mouseenter').find('input').trigger('focus');
and change it to: (dynamic select):
var idxSelected = 0;
if (o.multiple == true){
// find first checked.
idxSelected = $container.find('input[type=checkbox]:checked:first').parent().parent().index();
}
else {
// find the one that checked
idxSelected = $container.find('.ui-state-active:first').parent().index();
}
idxSelected = idxSelected < 0 ? 0 : idxSelected ;
this.labels.eq(idxSelected).trigger('mouseover').trigger('mouseenter').find('input').trigger('focus');
tested on FF + CHROME + IE (on multiple + single list)