I have 2 dropdown lists on my webform and using jquery trying to filter/reset filter 2nd dropdown elements based on 1st dropdown selection.
$(document).ready(function()
{
$('#dropdown1').change(function(e)
{
switch ($(this).val())
{
case "4":
//this removal works
$('#dropdown2').filter(function()
{
return ($(this).val() == 16);
}).remove();
break;
.................
default:
//how would I restore filter here?
}
}
});
Removing part works, so it filters item with no problem, but I have difficulty restoring the filter on dropdown 2 if something else is chosen in dropdown 1. I was trying to use .hide() and .show() instead of .remove() but it doesn't seem to work on IE6 at least.
At the start of your document ready take a copy of the values in dropdown2 like this:
var drp2values = $('#dropdown2').html();
then whenever you want to reset the values in dropdown2 to its original state do this:
$('#dropdown2').html(drp2values);
The actual value in the var will be something like :
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="16">16</option>
just tried it:
This code works:
$(document).ready(function()
{
var drp2values = $('#dropdown2').html();
$('#dropdown1').change(function(e)
{
switch ($(this).val())
{
case "4":
//this removal works... now ;)
$('#dropdown2').find('option').filter(function()
{
alert('in4 filt' + drp2values + $(this).val());
return ($(this).val() == 16);
}).remove();
break;
default:
//how would I restore filter here?
$('#dropdown2').html(drp2values);
}
});
});
With this HTML
<BODY>
<select id='dropdown1'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id='dropdown2'>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="16">16</option>
</select>
</BODY>
The original code you posted where you said the remove worked, it didnt remove the individual option with value 16, it removed the entire dropdown as you were not geting the options before you filtered, you were removing the dropdown :)
Hope this helps.
Related
Rather than loading a new template, is there a way to force Meteor to initiate an iteration (using {{#each}}) of an array in Meteor? For example, if the user selects a value in a pull down selector, to then initiate Meteor to iterate through an array within that template to populate another multiple selector list rather than load a whole new template with the new selector list.
Let's say this is within a template:
.
.
.
<form class="input-field col s6 card-selector">
<select multiple">
<option value="" disabled selected>Select Students</option>
{{#each StudentList1}}
<option value= '{{FullName}}'>{{formatName FullName}} ({{Level}}) {{RoomWk1}}</option>
{{/each}}
</select>
</form>
.
.
.
When a user selects a value in a different selector in that template:
<select class="week-selector">
<option value="" disabled selected>Week</option>
<option value="Week1">Week 1</option>
<option value="Week2">Week 2</option>
<option value="Week3">Week 3</option>
<option value="Week4">Week 4</option>
<option value="Week5">Week 5</option>
</select>
it will force a reiteration of the first #each to:
<form class="input-field col s6 card-selector">
<select multiple">
<option value="" disabled selected>Select Students</option>
{{#each StudentList1}}
<option value= '{{FullName}}'>{{formatName FullName}} ({{Level}}) {{RoomWk2}}</option>
{{/each}}
</select>
</form>
It would be more efficient than loading a new template that's the same except for the multi selector values.
Sessions are reactive and you can achieve this by using sessions (check if you have session package).
//we don't want the session value from the previous search/events
Template.templateName.onRendered(function(){
Session.set('sessionName', undefined);
});
//I'd probably use onDestroyed instead of onRendered
Template.templateName.onDestroyed(function(){
Session.set('sessionName', undefined);
});
//template events
'change .week-selector': function(){
var selected = $('.week-selector').find(":selected").text();
Session.set('sessionName', selected)
}
//template helper
StudentList1: function(){
var session = Session.get('sessionName');
if(session !== undefined){
//return some documents using the session value in your find()
} else {
//return documents without session value
}
}
EDIT: I found .text() of the selected option in the event but you are free to return value or do whatever you want with the found value/text.
I'm not getting the behavior I'm looking for. Say I've got a html template in Meteor called Teacher. It has two selectors, a 'week' selector and a 'sunday-lessons' selector (I've simplified the template somewhat here):
<template name="Teacher">
{{#each TeacherName}}
<div class="row">
<div class="input-field col s2 fullModal">
<select class="teacher-week-selector" id="week-selector">
<option value="Off" disabled selected>Week</option>
<option value="Week1">Week 1</option>
<option value="Week2">Week 2</option>
<option value="Week3">Week 3</option>
<option value="Week4">Week 4</option>
<option value="Week5">Week 5</option>
</select>
</div>
</div>
<div class="row">
<div class="input-field col s1 fullModal">
<select id="sunday-lessons">
<option value="Off" disabled selected>{{sundayLesson}}</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
</select><label>SUN</label>
</div>
</div>
{{/each}}
</template>
In this case, {{#each TeacherName}} is returning ONE document since it returns an array with the document of interest in it.
I'm trying to get the behavior such that when the week selector is changed, it grabs the state of certain document properties in the database and inserts them into the sunday selector.
So I set a Session value first when the template renders:
Template.Teacher.onRendered(function () {
Session.set('WeekNumber', undefined);
});
Then in the events template I listen for the selector to change:
Template.Teacher.events({
'change #week-selector': function(){
var sselect = document.getElementById('week-selector').value;
Session.set('WeekNumber', sselect);
}
});
Then in the template helper I create a function that grabs the Session value and returns the value I want:
Template.Teacher.helpers({
sundayLesson: function () {
var lessonNum = Session.get('WeekNumber');
if (lessonNum === "Week1")
return Lessons.Week1.Sunday;
else if (lessonNum === "Week2")
return Lessons.Week2.Sunday;
else if (lessonNum === "Week3")
return Lessons.Week3.Sunday;
else if (lessonNum === "Week4")
return Lessons.Week4.Sunday;
else if (lessonNum === "Week5")
return Lessons.Week5.Sunday;
}
});
Even if I try to have the function return a primitive:
if (lessonNum === "Week1")
return 3;
Nothing happens. I'm expecting the 3 to be placed in the sunday-lesson selector at the moment the week selector is changed. I can see the value of the Session change if I put in alert(lessonNum), but the condition statements don't appear to be re-evaluating to return the different value. Not sure where I'm going wrong.
EDIT:
Interesting find. If I place the {{sundayLesson}} OUTSIDE the selector, I can get the reactive 3 value when the Session changes.
<p>{{sundayLesson}}</p> <!-- this works -->
<select id="sunday-lessons">
<option value="Off" disabled selected>{{sundayLesson}}</option> <!-- Doesn't work -->
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
</select><label>SUN</label>
The answer was found in the Materialize documentation. In order to update the selector dynamically, I needed to re-initialize the selector like this:
Template.Teacher.helpers({
sundayLesson: function () {
var lessonNum = Session.get('WeekNumber');
if (lessonNum === "Week1") {
$('select').material_select();
return Lessons.Week1.Sunday;
}
else if (lessonNum === "Week2") {
$('select').material_select();
return Lessons.Week2.Sunday;
}
else if (lessonNum === "Week3") {
$('select').material_select();
return Lessons.Week3.Sunday;
}
else if (lessonNum === "Week4") {
$('select').material_select();
return Lessons.Week4.Sunday;
}
else if (lessonNum === "Week5") {
$('select').material_select();
return Lessons.Week5.Sunday;
}
}
});
Sort of clumsy, but that's the solution.
I have a dropdown that gets its items from database. The default value to be selected in this dropdown is retrieved from a cookie.
The problem is,
1. there is an empty option tag as the first option and also,
2. the default value is not selected.
There is no issue at all when I use v1.3.16. This happens when using v1.2.0. (I have to use only v1.2.0)
How to fix this.
ASPX:
<select id="ddlItems" data-ng-model="ItemId">
<option value="-1">-- All Circles --</option>
<option data-ng-repeat="item in Items" value="{{item.AreaCode}}"
data-ng-selected="item.AreaCode==ItemId">{{item.AreaName}}</option>
</select>
Ctrl.js:
var promise = MyFactory.GetItems();
promise.then(function (success) {
if (success.data != null && success.data != '') {
var data = success.data;
$scope.Items = data.lstItems; //bind items to dropdown
$scope.ItemId = itemIdFromCookie; //select default value
alert(itemIdFromCookie); //it pops -1
}
else {
console.log(success.data);
}
}
Rendered HTML:
<select id="ddlItems" data-ng-model="ItemId">
<option value="? string:"-1" ?"></option>
<option value="-1">-- All Circles --</option>
//...other options
</select>
Try to use ngOptions instead
Like this
<select id="ddlItems"
data-ng-model="ItemId"
ng-options="item.AreaCode as item.AreaName for item in Items">
<option value="-1">-- All Circles --</option>
</select>
This happens becausedata-ng-model="ItemId" is empty when your model is App is Loaded.
To Have some initial value. you can put default value in ng-init
For Ex : data-ng-init='data-ng-model="--SELECT--";'
Or per your Array list Item which you are getting from database set one of the values.
Remember init will get triggered b/f you complete the Ajax Call.
Is there any elegant way to create something like this
<select>
<option value="" disabled selected>Select your option</option>
<option value="1">Option1</option>
</select>
using #Html.DropDownListFor helper in ASP.NET MVC 4?
http://jsfiddle.net/wLAt8/
Unfortunately not. There is no way to add attributes to a SelectListItem, which is what gets rendered as an <option>.
You would need to extend the SelectListItem class, and then extend the DropDownListFor to use it. It is unfortunately not very straightforward... It would have been nice for there to be an Attributes dictionary on SelectListItem for this purpose.
Here is an implementation of a custom attribute being applied:
Adding html class tag under <option> in Html.DropDownList
Here's one way you could do it using tag helpers.
<select asp-for="#Model.Orders.FruitsId" class="form-control">
<option value="">Select a Fruit</option>
#foreach (var Fruit in Model.Fruits )
{
if (barber.Name.Equals("Orange"))
{
<option disabled="disabled" value="#Fruit.Id">#Fruit.Name </option>
}
else
{
<option value="#Fruit.Id">#Fruit.Name </option>
}
}
</select>
After struggling I've done this via js function:
function handleSubAction(select) {
var item = document.getElementById(select);
item.children[0].disabled = true;
item.children[0].hidden= true;
return false;
}
and event handler in HTML:
<body onload="handleSubAction('subAction');"/>
I have Bootstrap Multi-select dropdown and the code is:
<select class="multiselect" multiple="multiple">
<option value="one">test value for one</option>
<option value="two">test value for two</option>
<option value="three">test value for three</option>
<option value="four">test value for four</option>
</select>
whenever i select from 1 to 3 its showing the selected value. After selecting the fourth checkbox in dropdown it start displaying "4 Selected". the problem is i need to fix the width of the dropdown, so that if i select one, i need to display 1 Selected instead of the first checkbox value. How can i achieve that.
Tried this also but i didnt find what exactly i need. http://davidstutz.github.io/bootstrap-multiselect/
Thanks in advance.
If you are using http://davidstutz.github.io/bootstrap-multiselect/ then try following code...
DEMO LINK
JS:
$('#example').multiselect({
buttonWidth: '500px',
buttonText: function (options) {
if (options.length == 0) {
return 'None selected <b class="caret"></b>';
} else {
var selected = 0;
options.each(function () {
selected += 1;
});
return selected + ' Selected <b class="caret"></b>';
}
}
});
HTML:
<select id="example" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>