Javascript - Plugin should not affect all select boxes - javascript

I use a JQuery/Javascript plugin which changes select boxes with:
$('select').multipleSelect();
The select boxes look like:
<select multiple=\"multiple\">\r\n" +
<option selected=\"selected\" value=\"1\">January</option>
<option value=\"2\">December</option>
<option value=\"3\">December2</option>
</select>
The probem is that it changes all select boxes on the site but it should change one select box only.
How to do it?

Just give the select you want to select, a class, and then call the plugin on it
<select class="selectMe" multiple="multiple">
<option selected="selected" value="1">January</option>
<option value="2">December</option>
<option value="3">December2</option>
</select>
And then in jQuery
$('select.selectMe').multipleSelect();
You need not define an actual class in CSS, though you can, if you want. From now on, just add class selectMe to the <select> that you want the plugin to be called upon.

Related

Prevent style changing of the html select on size changing

How could I prevent style changing of the html select on size attribute changing?
<svg>
<foreignObject>
<select name="select1" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=1;' onblur="this.size=0;">
<option value="1">This is select number 1</option>
<option value="2">This is select number 2</option>
<option value="3">This is select number 3</option>
<option value="4">This is select number 4</option>
<option value="5">This is select number 5</option>
<option value="6">This is select number 6</option>
<option value="7">This is select number 7</option>
<option value="8">This is select number 8</option>
<option value="9">This is select number 9</option>
<option value="10">This is select number 10</option>
<option value="11">This is select number 11</option>
<option value="12">This is select number 12</option>
</select>
</foreignObject>
</svg>
Here is a fiddle, because for some reasons I can not run the html in the SO fiddle.
What I tried to do is to catch all style changes using the Chrome dev tools, but there are too many of them (changes).
I need to change the size so that to be able put a constraint onto the number of the options visible at once in the select.
In order to avoid a possible x-y problem: I need this to make a scrollable dropdown in svg using the foreignObject and html select.
I would like to be able to select only one option at a time.
According to this question, specifically to the answer:
The behavior depends on the browser and cannot he controlled by the author. You can use the size=10 attribute in the element, but it also changes the menu to a listbox so that 10 options will be visible even when the menu is not focused on. To achieve the behavior you describe, you would need to build your own controls using JavaScript and CSS.
I may tell that my question is about preserving the menu and not changing the style to the listbox style.

Modify selected property in select option

I'm building a select with several options from my php script using pattemplate.
But no matter what I do, the selected option shows in the dom tree like this:
<select id="academicYear">
<option value="1516">2015-2016</option>
<option value="1415">2014-2015</option>
<option selected="" value="1314">2013-2014</option>
<option value="1213">2012-2013</option>
</select>
Is there any way using dom - javascript - jquery to turn:
<option selected="" value="1314">2013-2014</option>
Into:
<option selected value="1314">2013-2014</option>
?
The reason why I need the change: with selected="" I don't get any selection when my select shows in the dialog window where I present it. When I turn it into just select with Firebug and Chrome debug bar the selection works.
Thans a ton!
You can use the id for faster and safer selector:
$('#academicYear option[value="1314"]').prop('selected', true);
The right html sintaxis is:
<option selected="selected" value="1314">2013-2014</option>
I believe setting the value of select will alter that property correctly for you. Otherwise if you still need to change the selected property...
$('option[value="1314"]').prop('selected', true);

How do I determine if different sections of a checkbox dropdown menu are selected?

I have a multiselect dropdown menu where each option has a checkbox and more than one option can be selected at once. I'm using a jQuery multiSelect plugin generate the dropdown.
<select id="types" multiple="multiple" size="5">
<option value="">Show All</option>
#{
<option value="Gains">Gains</option>
<option value="Losses">Losses</option>
<option value="Adjustments">Adjustments</option>
<option value="Future">Future</option>
<option value="Deliveries">Deliveries</option>
<option value="Recoveries">Recoveries</option>
<option value="Full Payout">Full Payout</option>
<option value="Early Payout">Early Payout</option>
<option value="Charge Offs">Charge Offs</option>
<option value="Returns">Returns</option>
<option value="Transfers">Transfers</option>
<option value="Ins. Write-offs">Ins. Write-offs</option>
}
</select>
What I need to be able to do is separate the options into 2 sections. The first 4 in a section and the last 8 in a section. If an option is selected in one section, then any options that are selected in the other section are then unselected. This is already setup in a C# .NET application. I am having to replicate the functionality. I don't have access to the .NET code. At first I thought maybe I could put the different options into separate divs and just check whether an option was selected in each div but I get validation errors when I try to do that. I'm not really sure what else I could try. Any help with this would be great. Thanks.
try using classes, attach a jquery check box click(), check for class if ( $(this).hasClass("checkboxSection1") ) then uncheck all the other ones like so $(".checkboxSection2").prop('checked', false);
so some simple code is
$("myForm :checkbox").click( function(){
$(this).hasClass("checkboxSection1")?
$(".checkboxSection2").prop('checked', false):
$(".checkboxSection1").prop('checked', false);
});
How about giving them a set of classes e.g. 'option1' & 'option2', then you can do a little javascript/jquery to handle the logic of the selection process...

Creating a select drop-down list that expands when a user hover over an option

I am trying to create a select element which has a basic list, then when the user hovers over an option it expands to shows a more complete list.
I started by using css to hide all the values I wanted hidden, but this did not adjust the height of the select dropdown, so I was left with a lot of white space.
I then tried to have two selects, one with the reduced list, the other with the complete list(which is hidden). I then used javascript to copy the options from the complete list to the reduced list, when a user hover on the 'Other' optgroup. The code for this is shown below.
Html:
<select id="Title">
<option value="">Select...</option>
<option value="MR">Mr</option>
<option value="MISS">Miss</option>
<option value="MRS">Mrs</option>
<optgroup label="Other">Other</optgroup>
</select>
<select id="FullTitle" style="display:none">
<option value="">Select...</option>
<option value="MR">Mr</option>
<option value="MISS">Miss</option>
<option value="MRS">Mrs</option>
<option value="MS">Ms</option>
<option value="DR">Doctor</option>
</select>
Javascript:
<script type="text/javascript">
$('select').find('optgroup').hover(
function () {
var parent = $(this).parent()
var selected = parent.find('option:selected').val()
var id = "#Full" + parent.attr('id')
parent.html($(id).html())
parent.find('option[value="'+ selected +'"]').attr('selected', 'selected')
})
</script>
This works fine in firefox but does not work in either IE or Chrome. I am not sure why.
I was wondering if anyone knows why this is not working or a better approach to my problem?
Hover events don't fire for options in IE and Chrome. There are some scripts you can try that might do this, and I've seen other posts on this site about it as well:
jquery hover event doesn't work with select option tag in google chrome?
From what I've seen, converting this into a div/ul and using css/jquery to make it look like a select list might by your best bet.

jquerymobile Add select menus dynamically

I have a set of dropboxes
code is
<fieldset data-role="controlgroup" data-type="horizontal">
<!--<legend> </legend>-->
<select name="select-widget" id="select-widget">
<option value="Widget">Widget</option>
</select>
<select name="select-nbl" id="select-nbl">
<option value="NBL">NBL</option>
<option value="HSM">HSM</option>
<option value="TERR">TERR</option>
<option value="KEY_ACCOUNT">KEY ACCOUNT</option>
</select>
<select name="select-level-focus" id="select-level-focus">
<option value="LEVEL">LEVEL</option>
<option value="FOCUS">FOCUS</option>
</select>
<select name="select-wdg" id="select-wdg">
<option value="WDG">WDG</option>
</select>
<select name="select-wds" id="select-wds">
<option value="WDS">WDS</option>
</select>
</fieldset>
No I want to remove exixsting selectbox or add new select box to it on change of "select-nbl" or "select-levelfocus"
How to do it using jquerymobile
This has little to do with jQuery mobile, that's merely a mobile framework. The event listeners and DOM manipulation you want to do here is still handled by jQuery.
Anyways, how do you do it?
Well, you have your event listeners:
$('#select-nbl').change(function() {
#Do something
});
And you can hide stuff:
$('#select-wdg').parents('.ui-select').hide();
The use of parents() is to take care of the extra styling jQuery mobile puts in there.
You can't easily add select boxes to jQuery mobile, but if they're hidden, you can show them.
$('#select-wdg').parents('.ui-select').show();
All this is action: http://jsfiddle.net/luhn/Vgc4g/9/

Categories

Resources