I have a multiple select options and select all button. When clicked on select all button then all options should get highlighted. However, in my case when clicked on select all button then I am getting all the options as selected and it's values but the options are not getting highlighted.
Here's my controller code.
$scope.selectedAll = function(){
$scope.user.profile = [];
angular.forEach($scope.userprofiles, function(item){
$scope.user.profile.push( item.profile);
});
}
HTML:
<div class="label_hd">Profiles
<input type="button"
id="select_all"
ng-click="selectedAll()"
name="select_all"
value="Select All">
</div>
<select multiple
class="browser-default"
name="userprofile"
id="userprofile"
ng-model="user.profile">
<option ng-repeat="profile in userprofiles"
value="{{profile.profile}}">
{{ profile.profile_name }}
</option>
</select>
Here is a fiddle: https://jsfiddle.net/MSclavi/zybnjpot/12/
You were on the right path. Instead of using a ng-repeat with your options, use ng-options. Here is the documentation https://docs.angularjs.org/api/ng/directive/ngOptions. Good luck
Related
I am trying to add a button that get the id of the selected list of restaurants so i can pass that id to my API request whenever i click on my button. However, i cannot add my button to the select because it disappear and i seem to be outside of the option loop in order to retrieve the id.
<div id="selectedList" class="addFavoriteRestaurantToList">
<select name="list_id" #change="onChange($event)" class="form-control">
<option>--- Select a fav list ---</option>
<option :key="listresto.id" v-for="listresto in favoriteRestaurantData"> {{listresto.name}}</option>
</select>
<button class="removeButton" #click="AddFavoriteRestaurant( listresto.id, restaurantData.id)"> Add "{{restaurantData.name}}" to your your favorite list</button>
</div>
method used to return what i selected in dropbox (works but since i cant use anything on my button, im stuck) :
onChange(event) {
return event.target.value;
}
So what i want it to get the id of the selected list to use it on my button.
<div id="selectedList" class="addFavoriteRestaurantToList">
<select v-model="list_id" name="list_id" #change="onChange($event)" class="form-control">
<option>--- Select a fav list ---</option>
<option :key="listresto.id" :value="listresto.id" v-for="listresto in favoriteRestaurantData"> {{listresto.name}}</option>
</select>
<button class="removeButton" #click="AddFavoriteRestaurant( list_id, restaurantData.id)"> Add "{{restaurantData.name}}" to your your favorite list</button>
</div>
and v-model="list_id" declare list_id in data:({list_id:''})
don't forget line with :value="listresto.id"
<option :key="listresto.id" :value="listresto.id" v-for="listresto in favoriteRestaurantData"> {{listresto.name}}</option>
I have two dropdowns (select in HTML), when I select the option in the first dropdown it has to fill the second according to the id of the selected item of the first. It's doing well at removing all the previous options and filling with the id selected in the first dropdown, however it's not removing the text appearing as selected. I'm stuck at the version 1.11 of Jquery if it matters somehow. I've tried doing this both through Jquery and Javascript.
Here is the html code where the selects are:
<div class="ui-grid-a">
<div class="ui-block-a uf">
<label for="cpEstado" class="select">
<select name="estado" id="cpEstado" data-theme="c"> <!--onchange="appUsuario.buscarCidades( this.value );">-->
<option value="" disabled selected>UF</option>
</select>
</label>
</div>
<div class="ui-block-b cidade">
<label for="cpCidade" class="select">
<select name="cidade" id="cpCidade" data-theme="c">
<option value="1" disabled selected>Cidade</option>
</select>
</label>
</div>
Here is the Jquery function I used to fill the second dropdown:
$(document).on('change', '#cpEstado', function() {
$('#cpCidade').empty();
appUsuario.buscarCidades( this.value );});
When I changed the text of the selected text,
$("#cpCidade option:selected").html('Mudança de valor');
This happened. It changes the text of the item in the dropdown but not in the selected item:
You should be setting the value of the second dropdown (instead of setting the html content of the selected option):
$("#cpCidade").val('{id}');
Where id = the value of 'Mudança de valor'
I'm seeking guidance to get me going in the right direction. My professor is at a loss. I'm having issues with the POST in my form for the select2 multiple fields. I have a Yes/No flag, that determines which select 2 select option to show.
The javascript below works great for the show/hide.
$(document).ready(function () {
$('#option').change(function () {
$this = $(this)
$('.select_box').each(function () {
$select = $('select', this);
if ($select.data('id') == $this.val()) {
$(this).show();
$select.show().select2();
} else {
$(this).hide();
$('select', this).hide();
}
});
});
});
My form has a Yes/No/NA option, which dictates what select 2 box to show using the javascript above.
<select name ="option" class="form-control " id="option">
<option value="1"> Yes</option>
<option value="0"> No</option>
<option value="2"> N/A</option>
</select>
My form POST is handled with the general POST option as shown below:
<form action = "{% url 'final' %}" form method = "POST">
Inside my form I have the .select_box div class. The select 2 option gives the correct fields and populates the multi-select correctly.
<div id = "div_yesselect" class="select_box">
<script src= "{% static '/accounts/option_select2.js' %}" type="text/javascript"></script>
<select data-placeholder="Please select your course(s)?" data-id="1" class="js-example-basic-multiple" multiple="multiple" id = "id_courseselect" value = "{{course.id}}" style="width: 1110px" >
{% for course in courses%}
<option value="{{course.name}}" name = "courseid" >{{course.name}}</option>
{% endfor %}
</select>
The POST goes through when the user hits the Submit Button. I can verify all the fields in my form except for the select2 option when a user selects multiple options, or a single option.
<button class="btn btn-primary " type="submit">Submit</button>
In my final view when trying to request the POST on the select2 name it returns an empty set, but everything else in the form returns the correct value. Why doesn't the select2 option post correctly?
courselist = request.POST.getlist('courseid')
Form POST in Django depends on name attributes. When you request courseid, it's going to look for an element with name attribute equal to courseid, meaning:
courselist = request.POST.getlist('courseid')
needs a matching element, for example
<select name="courseid" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
You need to add name attribute to your select element and it should work.
I have select box and have default value is text "please select one", I need solution while if any other option is selected (eq. abc) and user need to clear what he has selected(important is getting default value selected again) with button("Clear and go Next") event.
http://plnkr.co/edit/HIOOHBHaibHmDtiLdGfh?p=preview
<select ng-model="item" ng-options="item.name for item in options"
ng-change="doSomething()">
<option value="">Please select one</option>
</select>
I'm not entirely sure what you're asking, but if you need to clear the selected value, you can do something as simple as:
HTML
<button ng-click="reset()">Clear and move Next</button>
JS
$scope.reset = function() {
$scope.item = "";
}
Plunk
I want to add more elements inside a list with multiple select checkboxes, but when I add more elements, they appear outside the list.
This is the code I want to put in:
<div class="select-box-style right">
<div class="your-list-title">Your Lists</div>
<select multiple="multiple" class="md_what_get right SlectBox">
<option selected value="electronics">Electronics</option>
<option value="games">Video Games</option>
<option value="books">Books</option>
<option value="others">Others</option>
</select>
<div class="add-list-box">
<input type="text" class="input-add-list" />
<label class="label-spcbtn-blue spr">Add</label>
</div>
</div>
I want the select option to be displayed like this:
As per your comments if you want to put it inside list you can do it as below:
Put it as first element:
DEMO
$('.spr').on('click',function(){
if($('.input-add-list').val().trim()!=='')
{
$('<option value="'+$('.input-add-list').val().trim()+'">'+$('.input-add-list').val().trim()+'</option>').insertBefore('.SlectBox option:first');
}
});
Put it as last element
DEMO
$('.spr').on('click',function(){
if($('.input-add-list').val().trim()!=='')
{
$('.SlectBox').append('<option value="'+$('.input-add-list').val().trim()+'">'+$('.input-add-list').val().trim()+'</option>');
}
});
If possible change your label Add to button
Update
Use your native plugin method as below:
DEMO
$('.spr').on('click',function(){
if($('.input-add-list').val().trim()!=='')
{
$('select.SlectBox')[0].sumo.add($('.input-add-list').val().trim());
}
});