I am trying to add two select2 multi-value select boxes to my Rails app.
The top form works fine, but the bottom one does not work.
I experimented with changing ids and adding new js code, but no success. Is there something fundamentally wrong that I'm missing?
Index.html
# This one works fine
<div class="search_genre">Genre:</div>
<div class="select2-container select2-container-multi populate">
<select multiple="" name="e9" id="e9" style="width:300px" class="populate select2-offscreen" tabindex="-1" placeholder="Search or Select">
<optgroup label="Popular">
<option value="Alt">Rock</option>
<option value="Ind">Indie</option>
<option value="Ind">Alternative</option>
<option value="Ind">Acoustic</option>
</optgroup>
</select>
</div>
# This one doesn't show a text input or the optiongroup values
<div class="search_region">Region:</div>
<div class="select2-container select2-container-multi populate">
<select multiple="" name="e9" id="e9" style="width:300px" class="populate select2-offscreen" tabindex="-1" placeholder="Search or Select">
<optgroup label="Local">
<option value="PDX">Greater Portland</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>
</div>
application.js
$("#e9").select2();
You can not have two elements with the same id. Use classes instead.
Both your selects have id="e9" instead try adding something like class="my-select" to your <select> element.
then do $('.my-select').select2();
For each select2 in the same page you must define unique id for tag "data-select2-id".
data-select2-id="Project"
and
data-select2-id="WBSDate"
As #Ramy Mention. I hope its works fine for everyone.
If It won't work then try this.
In select box you can't use same id for an example:
<select class="form-control select2" id="select">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
<select class="form-control select2" id="select">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
If you have same id the search box won't work.
Just try to different Id Name like below.
<select class="form-control select2" id="select">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
<select class="form-control select2" id="select1">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
I faced this kind of problem. That's why i shared here my opinion.
Thanks hope someone will get help from this.
Ok, so it was something fundamental!
The id's were both the same. This seemed odd to me, and was the first thing that I changed to see if it would work. I added a new jquery code to application.js with id #e10 and changed teh second form's id accordingly. Yesterday, this didn't work. However, today it did. I must have missed something silly, like saving the page...
I wish SO allowed you to delete answers.
Using identical data-select2-id property solve the problem.
MVC input helpers throws sytax error for hyphen, replace the hyphen with underscore, and salute.
#Html.ListBoxFor(x => x.WIds, WList, new { #class = "form-control opWflWafers", #multiple = "multiple", data_select2_id=identicalname })
<div class="float-left col-sm-3">
<select class="form-control" id="parentesco" name="parentesco[]" required></select>
</div>
<script>
$('#parentesco*').select2({
placeholder: 'Seleccionar paciente',
ajax: {
url: 'ajax_paciente.php',
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: data
};
},
cache: true
}
});
</script>
Related
I want to make my 2 <select> change their values based on a single <select>, for example:
I want my kodethnajaran and kodesemester change their options value based on my selection on kodematkul.
Here is my code:
<div class="form-group">
<label>Mata Kuliah</label>
<select class="form-control" name="kodematkul" id="kodematkul" required>
<option value="null" selected="selected">-- Pilih --</option>
<option value='mk001'>Mobile Programming</option>
<option value='mk003'>Matematika Dasar</option>
<option value='mkl001'>Logika dan Pemrograman</option>
</select><br>
</div>
<div class="form-group">
<label>Tahun Ajaran</label>
<select class="form-control" name="kodethnajaran" id="kodethnajaran" required>
<option value="-" selected="selected">-- Pilih --</option>
<option value='thn001'class='mk001'>2017</option>
<option value='thn001'class='mk003'>2017</option>
<option value='thn001'class='mkl001'>2017</option>
<option value='thn002'class='mk003'>2016</option>
</select><br>
</div>
<div class="form-group">
<label>Semester</label>
<select class="form-control" name="kodesemester" id="kodesemester" required>
<option value="-" selected="selected">-- Pilih --</option>
<option value='sem002'class='mk001'></option>
<option value='sem001'class='mk003'></option>
<option value='sem001'class='mkl001'></option>
<option value='sem002'class='mkl001'></option>
<option value='sem002'class='mk003'></option>
</select><br>
</div>
The code above basically contains only my <select>, with data from sql. The script that I tried is:
$("#kodethnajaran,#kodesemester").chained("#kodematkul");
I'm not sure if this is applicable, because I tried to implement it based on this demo:
http://www.appelsiini.net/projects/chained/demo.html
it seems it can only change 'kodethnajaran' but doesnt change 'kodesemester' value.
Here's the fiddle...
https://jsfiddle.net/vu671ubm/
Ok so I investigated a little and the reason why your solution was not working as in example was jQuery version, You should use 1.10 to have chained working
Here goes codePen http://codepen.io/kejt/pen/NdzZqv?editors=1111
Also I have changed your code a little to work on classes
$(".form-control").each(function() {
$(this).chained($("#kodematkul"));
});
The class I have used is just an example, you can add new class for all selects that need to depend on given one. For example dependant-select and add this class to all select which should change on the first one update
I am trying to get only the checked names in a list of names. Here is my code model:
<select ng-model="selectTopic" ng-change="changedTopic(selectTopic)" ng-options="option as option for option in topics">>
<option value="" disabled>Select a Subject</option>
</select>
<select ng-model="selectDept" ng-change="changedDepartment(selectDept)" ng-options="option as option for option in department">
<option value="" disabled>Select a Department</option>
</select>
<select ng-model="selectUser" ng-options="option as option for option in users" multiple="multiple">
<option value="" disabled>Select a User</option>
</select>
I want to get the selected topic, department, and users. I am currently using: console.log($scope.topics + $scope.departments + $scope.users) but it returns everything. I just want to return the selected items.
Can anyone help me out?
You have to print the ng-models , not the arrays:
console.log($scope.selectTopic);
console.log($scope.selectDept);
console.log($scope.selectUser);
Hope it helps =)
use one object for the model in your form , then you have all the user input in that one object which makes it simple to send to server or to reset form
$scope.userInput={}
<select ng-model="userInput.selectTopic" ng-change="changedTopic(userInput.selectTopic)" ng-options='...'>
<select ng-model="userInput.selectDept" ng-change="changedDepartment(userInput.selectDept)" ng-options='...'>
to see this working put the following in your view temporarily
<pre>{{userInput|json}}</pre>
EDIT: post the question and magically it starts working :/ Maybe because I removed the alert?
So I have a dropdown selector that is supposed to represent the default for a set of dropdown selectors that make up a country list.
Here is one of the many code permutations I tried:
$("#edit-ip-ban-setdefault").change(function () {
var selected = this.selectedIndex
$(".form-type-select").each(function() {
$('.form-select').attr('selectedIndex', selected);
$(".form-select").val(selected).change();
});
});
Here is the relevant HTML for the default dropdown:
<select class="form-select valid" name="ip_ban_setdefault" id="edit-ip-ban-setdefault" selectedindex="1">
<option value="0"></option>
<option value="1"> Read Only </option>
<option selected="selected" value="2"> Complete Ban </option>
</select>
And here is the HTML for one of the many dropdowns I wish to have updated on change:
<div class="form-item form-type-select form-item-ip-ban-AF">
<select class="form-select valid" id="edit-ip-ban-af" name="ip_ban_AF">
<option selected="selected" value="0"></option>
<option value="1">Read Only</option>
<option value="2">Complete Ban</option>
</select>
</div>
I'm using jQuery 1.7, but ideally the solution would work for 1.5 to 1.10.
i'm a newb in angular and have some trouble to figure out how to use the values from ng-model in the correct way.
I made two drop-down lists and want to create a dependence between these two. The second list shall be displayed, depending on the user input of the first.
In this case the user shall select the kind of fermentation of a beer (here Obergärig for top-fermented) and the second drop-down should only be shown if the user took 'Obergärig'. I tried it with ng-show, but it doesn't work and i have no idea why or even if i use it the right way.
I would be very thankful if someone could give me a short explanation what i'm doing wrong.
Html for the first drop-down:
<div ng-controller="BierController">
<select ng-model="Bierart" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
</div>
Html for the second drop-down:
<div ng-controller="OberController" ng-show="Bierart == 'Obergärig'">
<select ng-model="OberBier" ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</div>
And here's the .js:
app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];});
app.controller("OberController", function($scope) {
$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];});
That's my first post here, so i'm thankful for every advise to improve the quality of this post. Also, please excuse my bad english.
Just do the next steps:
Use the same controller for both selects.
Create some $scope variable to save the condition of the first select.(e.g. $scope.selectedBeer)
Set the condition i ng-show property of the second select.
Example:
JS file:
app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];
$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];
$scope.selectedBeer = "";
});
HTML file:
<div ng-controller="BierController">
<select ng-model="selectedBeer" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
</div>
<div ng-controller="BierController" ng-show="selectedBeer == 'Obergärig'">
<select ng-model="OberBier" ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</div>
I may have done some syntax mistakes as I was coding this without any IDE, but the main idea is described. Good luck!
Your selects have to be managed by one controller. So, your code should look like:
<div ng-controller="BierController">
<select ng-model="Bierart" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
<div ng-show="Bierart === 'Obergärig'">
<select ng-model="OberBier" ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</div>
</div>
.js:
app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];
$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];});
Here's the new html:
<div ng-controller="BierController">
<select ng-model="selectedBeer" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
</br>
{{selectedBeer.name}}
<div ng-show="selectedBeer == 'Obergärig'">
<select ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</br>
{{selectedBeer.name}}
</div>
And the .js
app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];
$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];
$scope.selectedBeer = "";
});
Thanks for the advise, i'll install ng-inspect FF.
Here iam trying to get values based on #category selection when i select a category men or women,following select option should show the relevant options.what i did satisfied my requirement but when i try to access it using keyboard(down arrow) it shows all the options of the #subcategory.here is the code and fiddle.any help is thankful.
my fiddle http://jsfiddle.net/JUGWU/
HTML:
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1">MEN</option>
<option value="WOMEN" id="menu2">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing">Clothing</option>
<option id="Accessories" value="Accessories">Accessories</option>
<option id="Footwear" value="Footwear">Footwear</option>
<option id="Watches" value="Watches">Watches</option>
<option id="Sunglasses" value="Sunglasses">Sunglasses</option>
<option id="Bags" value="Bags">Bags</option>
</select>
Jquery:
$(document).ready(function(){
$("#category").change(function() {
var xyz = $("option:selected").attr("id");
alert(xyz);
if(xyz === "menu1"){
$("#subcategory option").hide();
$("#Clothing,#Footwear").show();
}
});
});
Try this in your conditional. The disabled property doesn't allow keyboard selection. Seems to work for me.
$("#subcategory option").prop('disabled', true).hide();
$("#Clothing,#Footwear").prop('disabled', false).show();
Also, your logic breaks if a user switches from men to women.
This answer is not exactly addressing your problem (using keyboard(down arrow)) but I think it is IMHO a better way to do what you want. And also I used the fixed part from #user2301903 answer, just to make my point. my main point here was using the markup attributes.
We can use our markup attributes to have less complexity, I changed your markup like this (added a catg attribute):
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1" catg="m">MEN</option>
<option value="WOMEN" id="menu2" catg="w">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing" catg="m">Clothing</option>
<option id="Accessories" value="Accessories" catg="w">Accessories</option>
<option id="Footwear" value="Footwear" catg="m">Footwear</option>
<option id="Watches" value="Watches" catg="w">Watches</option>
<option id="Sunglasses" value="Sunglasses" catg="w">Sunglasses</option>
<option id="Bags" value="Bags" catg="w">Bags</option>
</select>
and your code like this:
$(document).ready(function () {
$("#category").change(function () {
var catg = $("option:selected").attr("catg");
//from #user2301903 answer
$("#subcategory option").prop('disabled', true).hide();
$("option[catg=" + catg + "]").prop('disabled', false).show();
});
});
and this is your working DEMO;
and this one is another way of doing what you want which works even in IE: IE_DEMO