I've got about 830 items in my bootstrap-multiselect menu and 4 optgroups defined within that, with a few subitems in each. I'm finding the subitems in the optgroup are not indenting when displayed in the menu so that it's impossible to tell which items are in the optgroup and which are regular items after it (before is OK as the optgroup header is in bold). I'm using v0.9.15 (have to use Bootstrap 3 with this project).
In this example the four items following the app_hlrlist bold header should be indented as they are in the optgroup. The relevant bit of HTML supplied to the multiselect plugin is as follows (I've added two lines of regular options before and after the optgroup to show context):
<option value="app_fwdtonumber_isdn_country" data-type="string" data-encrypted="0">app_fwdtonumber_isdn_country</option>
<option value="app_fwdtonumber_isdn_countrycode" data-type="string" data-encrypted="0">app_fwdtonumber_isdn_countrycode</option>
<optgroup label="app_hlrlist">
<option value="app_hlrlist.app_hlrlist_hlrs_imsi" data-type="string" data-encrypted="E" data-arrayname="app_hlrlist">app_hlrlist_hlrs_imsi</option>
<option value="app_hlrlist.app_hlrlist_hlrs_imsi_operator" data-type="string" data-encrypted="U" data-arrayname="app_hlrlist">app_hlrlist_hlrs_imsi_operator</option>
<option value="app_hlrlist.app_hlrlist_hlrs_imsi_mcc" data-type="string" data-encrypted="U" data-arrayname="app_hlrlist">app_hlrlist_hlrs_imsi_mcc</option>
<option value="app_hlrlist.app_hlrlist_hlrs_imsi_mnc" data-type="string" data-encrypted="U" data-arrayname="app_hlrlist">app_hlrlist_hlrs_imsi_mnc</option>
</optgroup>
<option value="app_numofreqvectors" data-type="bigint" data-encrypted="0">app_numofreqvectors</option>
<option value="app_reqnodetype" data-type="string" data-encrypted="0">app_reqnodetype</option>
My multiselect configuration and initialisation is:
$('#my_menu')
.empty()
.append(options)
.show()
.multiselect({
maxHeight: 400,
numberDisplayed: 1,
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
filterPlaceholder: 'Search',
enableCollapsibleOptGroups: false,
enableClickableOptGroups: false,
indentGroupOptions: true
});
$('.multiselect-container .multiselect-filter').css({'position': 'sticky', 'top': '0px', 'z-index': 1 }); // Fix search box to top
Is there a way I can patch the multiselect list before or after rendering, to fix this? (or alternatively the code itself but that's less useful as ideally I need to have the multiselect plugin come from CDN).
Thanks
Related
What I want to accomplish, is to update multiple rows at once, based on what has been submitted using the form. I have a form with multiple checkboxes and select menu's, using:
<input type="checkbox" name="checkbox[]">
<select name="numbers[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
...and so on
In my controller I have the following code:
$checkedIDs = Input::get('checkbox');
$selectedNumbers = Input::get('numbers');
if(is_array($checkedIDs))
{
Products::whereIn('id',$checkedIDs)->update(['checkbox' => '1']);
Products::whereIn('id', $checkedIDs)->update(array('number' => '?'));
}
In the above code, how do I go about updating the "number" column to the actual submitted "number" in the checkboxes? If I change the question mark to for example "5", all checked checkboxes in the form will get their number updated to "5" in the database. But ofcourse, it needs to be selected value from the select menus, which differ for each checkbox.
I have three dropdowns with same class name:
<select class="MyClass">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="MyClass">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="MyClass">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
I want to change any of these dropdown values based on any other dropdrop selected. If I select option two from second dropdown - I want 1st and 3rd dropdown values to be two. All these dropdown should change values no matter which one I select.
Thanks.
You will need JavaScript to do this. Here is an code example using jQuery:
$('.MyClass').on('change',function(){
$('.MyClass').val( $(this).val() );
});
This will add an EventListeneer for the change Element and update all DropDowns to the value of the changed one.
http://jsfiddle.net/CWP7Q/
you can use jQuery or normal JS, but my example contains Jquery, which will give you an idea. Please check the example in Jsfiddle.
The example binds a change event to the class name of the three selectors:
$(".MyClass").change(function(){
$(".MyClass").val($(this).val());
});
and Voila, every selector gets changed.
Somehting like (with jQuery)
$('.MyClass').change(function() {
$('.MyClass').val($(this).val());
});
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 have a dropdownlist in my page and the html part lists below:
<select id="Permission_id" name="Permission_id"><option value="">Pls select</option>
<option value="001f492b-fbb2-440c-b2ac-1fab5d97f5e3">super</option>
<option value="559ede95-1dbb-45d5-ae41-2df6f460e87a">admin</option>
<option value="80b330ee-37dc-42c4-8902-c30254112c11">user</option>
<select>
And in the same page, I have another dropdownlist , the html part lists below:
<select id="TopPranet_id" name="TopPranet_id"><option value="">Pls select</option>
<option value="65c61442-e02f-4071-b746-2c7cbfcc859a">Settings--admin</option>
<option value="66d21c35-66a2-40d8-a9db-675b337fa0bb">Control--admin</option>
<option value="cd612bfc-9f61-4228-b986-90bda4be9d8d">Action--admin</option>
<option value="2a137846-5ae0-4104-b0c9-be09a0e772d8">Settings--super</option>
<option value="b75c43f3-cafb-41a2-a76b-c572fffd8a6a">Control--super</option>
<option value="2c3f618c-373f-4559-967f-d8dcea1b6996">Action--super</option>
</select>
Now I want to do things like below:
When Permission_id's select item changes, then TopPranet_id's item will only contains the items that have Permission_id's selected text inside. that is, if I select admin in Permission_id control, then TopPranet_id control will only contains Settings--admin,Control--admin,Action--admin item, others are removed.
I know I can use Jquery to do this, but I am a newer to this, also, regex maybe also required for doing this.
Need your help, thx.
Please check here i have added one ex
Here
You html all seems ok
Now
in javascript
$('#Permission_id').change(function()
{
$('#TopPranet_id option').each(function()
{
if(this.innerHTML.indexOf($('#Permission_id :selected').text())!=-1)
{}
else
{
this.style.display='none';
}
});
});
We have added change function which will detect the change event of the first dropdown and after this we will check that text with second dropdown which will show and hide the dropdowns
Sorry guys, I should have posted the script directly without cleaning it. Please check the updated script, it should now clear things up. Thanks!
Consider the following JavaScript :
var selected = 0;
var options = 0;
$('.newListSelected').each(function() {
selected = $(this).children('.selectedTxt');
selected = selected.text();
/* Everything before this line works completely fine */
options = $(this).prev();
options.find('option[value=' +selected+ ']').attr('selected', 'selected');
}).remove();
And HTML :
<select name="type[]" style="display: none;">
<optgroup>
<option value="none">Select</option>
</optgroup>
<optgroup label="First Group">
<option value="1">One</option>
<option value="2">Two</option>
</optgroup>
<optgroup label="Second Group">
<option value="10">Ten</option>
<option value="20">Twenty</option>
</optgroup>
</select>
<div class="newListSelected">
<div class="selectedTxt">20</div>
<ul class="newList">
<!-- Other stuff here -->
</ul>
</div>
What I'm trying to do actually is adding the selected attribute to the corresponding select option that has the same value as the text in .selectedTxt. In the code above, it should add selected="selected" to <option value="20">Twenty</option>.
However its not performing as expected, I also tried adding alert(option); below prev(); but it didn't output anything useful.
Thanks.
The Javascript works fine, as can be seen here: http://jsfiddle.net/4HsXp/
If you need to be able to select multiple items in a select element, you need to set the multiple and size attribute, like this:
<select multiple="multiple" size="2">
<option>1</option>
<option>2</option>
</select>
See: http://reference.sitepoint.com/html/select
Edit:
Attaching console.log statements to the new code still does not any problem. Running it on jsfiddle gave me the correct output:
jQuery(select)
Original Value: none
New Value: 20
I'm not sure what you are trying to do, but why couldn't you just select all option elements with proper selectors? If you want to select only some options, then you have to add extra selector attrbiutes.
$('select option').each(function() {
$(this).attr('selected', 'selected');
});