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>
Related
I am unfamiliar with select dropdowns and links. If I have:
<select>
<option value="">Select</option>
<option value="/Applications.aspx">Applications</option>
<option value="/EditApplications.aspx">Edit Application</option>
<option value="/AddApplications.aspx">Add Applications</option>
</select>
<button>Go</button>
When the user selects their option, how do I link the button to when the user clicks the button, it goes to the selected page within the dropdown in ASPX? I am sure I need to bind it somehow to the codebehind but I am not sure how to do this.
A very basic solution would be something like the snippet below. On the button click read the value of the select and redirect to that url. Don't forget to add an id to the select. And you need to add type="button" to the button, otherwise it will trigger a form post.
<select id="MySelect">
<option value="">Select</option>
<option value="/Applications.aspx">Applications</option>
<option value="/EditApplications.aspx">Edit Application</option>
<option value="/AddApplications.aspx">Add Applications</option>
</select>
<button type="button" onclick="GoTOUrl()">Go</button>
<script>
function GoTOUrl() {
var url = $('#MySelect').val();
if (url === '')
return;
location.href = url;
}
</script>
No need to wire it up to the code behind. This can all be handled client side with some javascript.
Make the button an actual link. Then update the href attribute and optionally the text.
//Get relevent elements
var linkDropDown = document.getElementById("MySelect");
var link = document.getElementById("Link");
//Wire up event listener to the dropdown
linkDropDown.addEventListener("change", function() {
var defaultVal = this.options[0].value;
//Toggle the inactive class based on selected value
link.classList.toggle("inactive", this.value === defaultVal);
//Set Href
link.href = this.value;
//Set Text using ternary operation
link.text = this.value === defaultVal ? "Go.." : "Go to " + this.options[this.selectedIndex].text;
});
.inactive {
pointer-events: none;
color: grey;
}
<select id="MySelect">
<option value="/">Select</option>
<option value="/Applications.aspx">Applications</option>
<option value="/EditApplications.aspx">Edit Application</option>
<option value="/AddApplications.aspx">Add Applications</option>
</select>
Go..
It is also possible to encapsulate this to automagically work if you have more than set of this on the page.
//Get relevent elements
var dropdowns = document.querySelectorAll(".dropdownSelect");
//Wire up event listeners
for(var i = 0; i < dropdowns.length; i++){
dropdowns[i].addEventListener("change", function(event){
if(event.target.nodeName === "SELECT") {
let sel = event.target;
let link = this.querySelector(".dropdownLink");
let defaultVal = sel.options[0].value;
//Toggle the inactive class based on selected value
link.classList.toggle("inactive", sel.value === defaultVal);
//Set HREF
link.href = sel.value;
//Set Text using ternary operation
link.text = sel.value === defaultVal ? "Go.." : "Go to " + sel.options[sel.selectedIndex].text;
}
})
}
.inactive {
pointer-events: none;
color: grey;
}
<div class="dropdownSelect">
<select>
<option value="/">Select</option>
<option value="/Applications.aspx">Applications</option>
<option value="/EditApplications.aspx">Edit Application</option>
<option value="/AddApplications.aspx">Add Applications</option>
</select>
Go..
</div>
<div class="dropdownSelect">
<select>
<option value="/">Select</option>
<option value="/WebSites.aspx">Web Sites</option>
<option value="/EditWebSites.aspx">Edit Web Sites</option>
<option value="/AddWebSites.aspx">Add Websites</option>
</select>
Go..
</div>
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 am new to the select2. i just want to know how to add the textbox and button into the select2.
for better understanding i putting picture here that you might be clear about my question. any answer is appreciated. please help me .
html code..
<select style="width:100%" multiple id="e8">
<option value="volvo">Suger</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
</select>
<script>
$("#e8").select2({
placeholder: 'Placeholder adding value test',
minimumResultsForSearch: -1,
});
</script>
Here is the answer which i got for this:
<select style="width:100%" multiple id="e8">
<option value="volvo">Suger</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
</select>
<script>
$("#e8").select2({
placeholder: 'Placeholder adding value test',
minimumResultsForSearch: -1,
});
$(".select2-drop").append('<div><input type="text" style="width: 86%;
padding: 9px;"name="lname"><input class="PrimaryBtn" type="submit" value="Add"></div>');
</script>
I have never used this plugin, but you can try to create your own div with the textbox and button inside and append that div to #select2-drop div using jQuery's .append(). Don't know if #select2-drop div is always populated(just grabbed it from plugin home page)
I have a dropdownlist declared like this:
<select id="PageToCreate_AuthorID">
<option value="">Please select...</option>
<option value="1">Thierry</option>
<option value="2">Vanessa</option>
</select>
When the page is showed the fist time, here is what is displayed:
As you can see, we don't see all the text inside the control.
Then I click inside it and the dropdown is adjusted:
How can I do to have the dropdown showed correctly when the page is showed the first time?
Thanks.
Try to add some css for your select tag :
<select id="PageToCreate_AuthorID">
<option value="">Please select...</option>
<option value="1">Thierry</option>
<option value="2">Vanessa</option>
</select>
Css:
#PageToCreate_AuthorID {
min-width:200px; /* Change this value if you think you must do it */
}
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.