Two custom multiselect drop down dependent on each other and based on combined result need to show items and when selecting one then in other dropdown value should be disabled if combination is not found
<div class="firstdrop">
<span value="ss">ss</span>
<span value="dd">dd</span>
</div>
<div class="seconddrop">
<span value="game">game</span>
<span value="football">football</span>
</div>
<div class="game ss"></div>
<div class="gamee dd"></div>
<div class="football ss"></div>
<div class="ss"></div>
The way I've done this in the past (loosely based on your example):
if($('#firstdrop').val() == 'some value') {
var oldval = $('#seconddrop').val(); // In case the chosen option exists in the new option set
var opts = '<option value="val1">Val 1</option>';
opts += '<option value="val2">Val 2</option>';
etc...
$('#seconddrop').empty().append(opts).val(oldval);
}
Oh, and you need to use select tags, not divs.
<select multiple id="firstdrop">...
<select multiple id="seconddrop">...
Related
I have to place a input box for search in custom dropdown for filtering the countries, but for the searching first time it is working fine (i.e; if I type 'ind', I have two countries with ind and I am able to click on that countries and select, but when I again edit the search box for another list of countries, the ng-click is not working and I am unable to select the item from list).
Html:
<div class="predtoptn" id="dvCountryLstdopn">
<input type="text" class="form-control frmsrch" ng-model="somvar.countryName" placeholder="Search Items"/>
<ul class="predtsct">
<li class="prfdwn" ng-repeat="countriesLst in ctrylst| filter:somvar:strict" ng-click="countryIdFunc(countriesLst.countryId,countriesLst.countryName)">{{countriesLst.countryName}}</li>
</ul>
</div>
JavaScript:
vm.countryIdFunc = function (Id, txt) { vm.cntryId = Id; vm.cntryIdTxt = txt; }
Can you try like the below in your template,
<li class="prfdwn" ng-repeat="countriesLst in ctrylst| filter:somvar:strict">
<span ng-click="countryIdFunc(countriesLst.countryId,countriesLst.countryName)">
{{countriesLst.countryName}}
</span>
</li>
I added an option to the dropdown that allows user to add item if it doesn't exist.
For that matter, I added an input field to the dropdown but when the user enters something, the dropdown tries to match the entered text with items that are already in the list.
I find it quite annoying in that specific case. I have noticed in the docs that input elements are bound to the search function. Nevertheless, I couldn't find how to disable this behaviour.
Here's the HTML:
<div class="ui fluid selection dropdown playlist">
<input name="playlist" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">playlist</div>
<div class="menu">
<div class="item create" data-value="0">
<span class="create-placeholder">+ new playlist</span>
<div class="ui action input add-playlist">
<input placeholder="new playlist">
<button class="ui button">Add</button>
</div>
</div>
<div class="item" data-value="1">foo</div>
<div class="item" data-value="2">bar</div>
<div class="item" data-value="3">baz</div>
</div>
</div>
The .add-playlist div and its content are not shown but I'm willing to spare you with the CSS here.
And the js:
$dropdown = $('.ui.dropdown');
$dropdown.dropdown({
action: (text, val) => {
if (val == 0) { // eslint-disable-line
$('.create-placeholder').hide(100);
$('.add-playlist').css('display', 'inline-flex');
$('.add-playlist input, .add-playlist button').show(200);
}
else $dropdown.dropdown('set selected', val).dropdown('hide');
},
onHide: () => {
// do that after dropdown has been hidden
setTimeout(() => {
$('.add-playlist, .add-playlist input, .add-playlist button').hide();
$('.create-placeholder').show();
}, 400);
}
});
I've set up a fiddle to have a clear exemple. Just type "foo" and you'll see what I mean in case it's not crystal clear.
To allow user to add new items just add allowAdditions: True To dropdown options, for more informtions see semantic-ui dropdown settings
Example:
$('dropdownSelector').dropdown({
allowAdditions: True
}).dropdown();
I'm trying to get the bootstrap multiselect widget to work. It works when I hardcode all the options, like this:
<select id="topic-select" multiple="multiple">
<option val='math'>math</option>
<option val='critical_reading'>critical reading</option>
<option val='writing'>writing</option>
</select>
$("#topic-select").multiselect({
includeSelectAllOption: true,
selectAllText: 'composite score',
allSelectedText: 'composite score',
selectAllNumber: false,
});
but if I try to populate the options with angular, like this:
<select id="topic-select" multiple="multiple" ng-option="topic in topicList">
</select>
then the dropdown window kindof bugs out, and doesn't show any of the options.
If I remove the javascript turning it into a multiselect, then it DOES show all the options.
I took a look at this similar question:
angularjs-ng-repeat-in-bootstrap-multiselect-dropdown
but couldn't didn't have any luck with it.
you don't really require Bootstrap multi-select if you're going for its functionality. You can get the same functionality in Angular, by populating your options in a dropdown, and adding them to a new list on ng-click.
<span uib-dropdown on-toggle="toggled(open)" auto-close = "outsideClick" >
<a class = "filter-names" href id="simple-dropdown" uib-dropdown-toggle>
My_Dropdown<span ng-repeat="list in generated_list">{{list.genre_name}},</span><b class="caret"></b>
</a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown" >
Search: <input type = "text" placeholder = "search in my list" ng-model = "search.name" />
<li ng-repeat="item in list_to_populate | filter:search" ng-class = "{true: 'filter-selected', false: ''}[item.selected == true]" ng-click="addToFilter(item)">
{{item.name}}
</li>
</ul>
</span>
And in the controller:
$scope.addToFilter = function(item) {
if(item.selected == "undefined" || item.selected == false)
{
item.selected = true;
Filters.addToFilters(item);
}
else
{
Filters.removeFromFilters(item);
item.selected = false;
}
}
And finally have a service "Filters" to store this list and call functions to use it anywhere.
You are missing "ng-model".
It is "ng-options" and not "ng-option".
Try this:
<select id="topic-select" multiple ng-model="selectedTopics" ng-options="topic as topic.name for topic in topicList">
</select>
Instead of populating the options with angular, I just add them to the div with vanilla javascript like this:
var topicSelect = $("#topic-select");
for (var topicId in topicList) {
topicSelect[0].add(new Option(topicList[topicId], topicId));
}
and everything works now.
i want to show and hide a div based on selection from the drop down , here is my code, this is my html code for dropdown which fetches the values from the "selectItemsFilterCriteria" json structure
<select ng-model="appointment" ng-change="changeme()" ng-options="item.name for item in selectItemsFilterCriteria">
<option ng-option value="" >Filter Criteria</option>
</select>
this is my changeme() function created inside a controller
$scope.changeme = function() {
$scope.appointment = $scope.items[0];
}
this is code for my div that is to be show or hide , right now my code is working on selection of first option from drop down it is showing me the div but the problem is that its not hiding that div on the selection of any other option from the dropdown list, kindly tell me where i m doing wrong??
<div class="mycontainer" ng-show=appointment >
<div class="left-nav">
<accordion close-others="true">
<accordion-group ng-repeat="item in pagedItems[currentPage] |filter:{name:item.name}| orderBy:sortingOrder:reverse">
<accordion-heading>
<table>
<tr class="odd" ng-click="showDataDetail=!showDataDetail" style="cursor: pointer">
<td><p class="lead-name">{{item.name}}</p>
<p class="call-up-icon">{{item.phoneNo}} </p>
<p>Lead Date : 07/02/2015</p></td>
<td><p></p>
<p class="blue-txt">{{item.trade}}</p>
<p class="fl cstm-wdth">GNU09</p>
<p class="fl">{{item.time}}</p>
<div class="cb"></div>
</td>
<td><p>Today</p>
<p>C#SQL</p>
<p class="blue-remark-icon"></p></td>
</tr>
</table>
</accordion-heading>
<div>{{item.data}}</div>
</accordion-group>
</accordion>
</div>
</div>
items array:
$scope.selectItemsFilterCriteria = [
{id:1 , name:"Appointments Scheduled"},
{id:2 , name:"fresh leads"}
];
Basically the problem is with your ng-change function call,
$scope.changeme = function() {
$scope.appointment = $scope.items[0];
}
You are setting appointment to first value of items array. Hence whenever you change the options, the function sets it back to first option , in turn the div is shown.
Please remove the ng-change function and try.
Remove the $scope.changeme() function. It is not necessary.
Since you are using ng-model on select whatever option you select will get assigned to the ng-model i.e appointment in your case.
Here is the plunkr example
I am trying to hide and show div's displayed on my page with a select element however having a bit of trouble as I can't seem to get the jQuery to function.
I am listing results from my SQL table using PHP that currently displays every row onto my page and prints them into a list.
I want to make the jQuery hide the div's that don't have a class that matches the select option that is selected.
Here is an example of the listing template that echo's out all of the MySQL results and displays them into a template and is then looped to display every row on the table:
<?php while($row = $results->fetch(PDO::FETCH_ASSOC))
{
echo '
<div class="listing-container ' . $row["Make"] . '">
<h3 class="model-listing-title clearfix">'.$row["Make"].' '.$row["Model"].' '.$row["Variant"].'</h3>
<h3 class="price-listing">£'.number_format($row['Price']).'</h3>
</div>
<div class="listing-container-spec">
<img src="'.(explode(',', $row["PictureRefs"])[0]).'" class="stock-img-finder"/>
<div class="ul-listing-container">
<ul class="overwrite-btstrp-ul">
<li class="diesel-svg list-svg">'.$row["FuelType"].'</li>
<li class="saloon-svg list-svg">'.$row["Bodytype"].'</li>
<li class="gear-svg list-svg">'.$row["Transmission"].'</li>
<li class="color-svg list-svg">'.$row["Colour"].'</li>
</ul>
</div>
<ul class="overwrite-btstrp-ul other-specs-ul h4-style">
<li>Mileage: '.number_format($row["Mileage"]).'</li>
<li>Engine size: '.$row["EngineSize"].'cc</li>
</ul>
<button href="#" class="btn h4-style checked-btn hover-listing-btn"><span class="glyphicon glyphicon-ok"></span> History checked
</button>
<button href="#" class="btn h4-style more-details-btn hover-listing-btn tst-mre-btn"><span class="glyphicon glyphicon-list"></span> More details
</button>
<button href="#" class="btn h4-style test-drive-btn hover-listing-btn tst-mre-btn"><span class="test-drive-glyph"></span> Test drive
</button>
<h4 class="h4-style listing-photos-count"><span class="glyphicon glyphicon-camera"></span> 5 More photos</h4>
</div>
';
} ?>
The 'Make' is added to the listing-container div to add a class to be able to filter the results with jQuery.
Here is the form with the select element I am using:
<form>
<select class="form-control select-box">
<option value="make-any">Make (Any)</option>
<?php while($make = $filterres->fetch(PDO::FETCH_ASSOC))
{
echo '
<option>'.$make["Make"].'</option>
';
} ?>
</select>
<select class="form-control last-select select-box">
<option value="model-any">Model (Any)</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</form>
As you can see the select option contains the 'Make' and is looped.
So down to the jQuery:
<script>//Wait for DOM to load
(function() {
$(“.select-box”).change( function() {
// get the value of the select element
var make = $(this).val();
//get all of the listing-container divs, remove the ones with the selected make class, then hide the rest
$(“.listing-container”).not(“.” + make).hide();
});
});</script>
So in theory this should work but for some reason it isn't, can anybody notice anything that might be wrong?
I have placed my script below the core jQuery in my footer and it still doesn't work.
Here is a live example: http://www.drivencarsales.co.uk/used-cars.php
Looks like you're using the wrong quotes in the source code of that page try replacing them with "
//Wait for DOM to load
$(function() {
$(".select-box").change( function() {
// get the value of the select element
var make = $(this).val();
//get all of the listing-container divs, remove the ones with the selected make class, then hide the rest
$(".listing-container").not("." + make).hide().next().hide();
});
});
Edit
You also need a $ before the function
If I understand you correctly ↓ working code ↓
$(function() {
$('.select-box').on("change",function() {
var make = this.value;
$('div.listing-container.'+make+",div.listing-container."+make+" + div.listing-container-spec").show();
$('div.listing-container:not(.'+make+'),div.listing-container:not(.'+make+') + div.listing-container-spec').hide();
});
});
And shorter code (but slower):
$(function() {
$('.select-box').on("change",function() {
var make = this.value;
$('.listing-container.'+make+",.listing-container."+make+" + div").show();
$('.listing-container:not(.'+make+'),.listing-container:not(.'+make+') + div').hide();
});
});
P.S.You miss value attribute (but in live example everything ok):
echo '<option value="'.$make["Make"].'">'.$make["Make"].'</option>';