Boostrap selectpicker sort by selected option - javascript

I have a with lot of parameters, some of the parameters are selected by default. I whant to show firt all the parameters selected.
HTML code
<select id='selectUsers' class="selectpicker selectpickerUsers" name="users[]" data-width="100%" multiple data-live-search="true">
#foreach($users as $user)
<option data-tokens="{{$user->id}}">{{$user->Name}}</option>
#endforeach
</select>
JavaScript code
$('.selectpickerUsers').selectpicker({
sortBy: 'selected'
});
I try to do this, but it doesn't work.
I need to sort all the options from the list by selected values.

Related

Chrome console script to select options in a drop down menu

I have a page with a lot of food items there are a few options for me to select for each food item. I want to sequentially select Order for everything on the menu. Is there a script to make this happen? Thanks!
<select class="form-control" onchange="setFlag(999$(this).val(),$('option:selected', this).html());"> </select>
<option value="Order"> Make this order </option>
<option value="Veto"> Veto this order </option>
HTML
<select id="sel">
<option value="Order"> Make this order </option>
<option value="Veto"> Veto this order </option>
</select>
JS
document.querySelector("#sel").value = "Veto" // selects 2nd option from dropdown
I would take a look at this answer https://stackoverflow.com/a/6068322/1115876
something like
$('[value="Order"]').prop('selected', true)
should work

Toggling ng-selected

I am trying to toggle ng-selected options in Angular, but am running into some difficulty. Here's what I'm trying:
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option value="0-15" ng-click="toggleSelect(datacut, '0-15')" ng-selected="datacut.ages.indexOf('0-15') !== -1">15 and Younger</option>
<option value="16-19" ng-selected="datacut.ages.indexOf('16-19') !== -1">16 - 19</option>
<option value="20-24" ng-selected="datacut.ages.indexOf('20-24') !== -1">20 - 24</option>
</select>
Controller:
$scope.toggleSelect = function(dc, str){
dc.ages.splice(dc.ages.indexOf(str), 1);
//e.currentTarget.selected = !e.currentTarget.selected;
};
The problem is that when I click on an option gets selected on mousedown, and on release gets unselected. The commented out code also does the same thing.
I feel like this should have a simple solution, but I can't really figure out an elegant solution.
Any help would be much appreciated.
Edit: For clarification - I need to be able to have nothing selected, so clicking a single selected element needs to unselect it. I also need to be able to select multiple options.
Your are using ng-model which does the magic for you. So ng-click and ng-selected is not necessary. See my working fiddle
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option ng-value="'0-15'">15 and Younger</option>
<option ng-value="'16-19'" >16 - 19</option>
<option ng-value="'20-24'" >20 - 24</option>
</select>
It looks like you want to remove the selected age from the ages model. Then you need to use the ng-change directive. And remove the ng-click or ng-selected. But leave the ng-model to access the value on the method that remove the selected item.
See my plunker
<select multiple name="ages" unseletable forbiden-opt="datacut.MIN_AGE" ng-model="datacut.chosenAge">
<option value="" disabled="disabled">Please Select</option>
<option ng-repeat="age in datacut.ages" value="{{age}}">
{{age}}
</option>
</select>
EDIT: This should be made in a directive because you need to update the option html to unselect the option.

Multiple ng-options set default option select not working

I´m having an issue with to select a default value on a select with Angular.
If my select options only has one value it´s ok and works fine
<select id="customerId"
ng-model="customer"
ng-options="customer.id for customer in customersSelect">
</select>
In my angular js:
$scope.customer = customer;
But if I try with multiple elements on ng-options and I set the default option, is not working
<select id="customerId"
ng-model="customer"
ng-options="customer.id as customer.name for customer in customersSelect">
</select>
Any ideas?
You can use a option tag.like below:
<select
id="customerId"
ng-model="customer"
ng-options="customer.id as customer.name for customer in customersSelect">
<option value="">PLease select one</option>
</select>
Thats it.

Setting HTML drop down list option

I am trying to set value from php the option selected in a drop down list in html.
can anyone tell me how to give the "selected" attribute as the answer is generated dynamically
<select form="onsite_assessment" class="form-control" id="onsite_assessment">
<option value="no">NO</option>
<option value="yes">YES</option>
</select>
In the above code if the user has selected No in the previous session. i want to display that option by default.
This is just some general code which can be shaped for your needs. As I can't see all your code I cannot give a FULL answer. Basically you need to store the users' choice and retrieve this in a variable whenever needed, either string or Boolean (true/false). In the example I will show this using a string.
<?php
$user_choice = 'yes';
?>
<select form="onsite_assessment" class="form-control" id="onside_assessment">
<option value="no" <?php if($user_choice == 'no'){echo 'selected'; }>NO</option>
<option value="yes" <?php if($user_choice == 'yes'){echo 'selected'; }>YES</option>
</select>

how to show the content of one drop down dynamically on changing the value of another drop down in smarty

I'm new to php and open to any kind of suggestions regarding this issue...
I have a nested php array something like this....
category1->0->name
category1->1->name
category2->0->name
category2->1->name
......................
......................
I want to show 2 drop downs in smarty template file.
first one is a category drop down i.e. category1, category2.
second one is dependent on first. So, if I select category1 in first drop down then it should show me all the names associated with category1 and so on....
I am not using Jquery, instead I'm working with just javascript.
Can anyone please provide me sample code to do this?
<!--JAVASCRIPT-->
<!--CREATE DROPBOX WHEN CAT1 IS SELECTED-->
<script>
var category = document.getElementById("category").value;
if(category == CAT1){
document.getElementById("subcat").innerHTML='
<select name="subcategory" type="text" id="subcategory">
<option value=""></option>
<option value="Sub1">Sub1</option>
<option value="Sub2">Sub2</option>
<option value="Sub3">Sub3</option>
</select>"
';
}
</script>
<!--HTML MARKUP-->
<select name="category" type="text" id="category">
<option value=""></option>
<option value="CAT1">CAT1</option>
<option value="CAT2">CAT2</option>
<option value="CAT3">CAT3</option>
</select>
<!--SPACE TO PLACE DROPBOX FROM JAVASCRIPT-->
<span id="subcat">
</span>

Categories

Resources