Before marking question duplicate, I want to make clear that I have already tried all the ways possible (e.g. here) to simply load a select2 dropdown on a simple page in Meteor.
Below is simple code to understand my select2 application procedure.
ManageRoles.js
Template.ManageRoles.onRendered(function() {
$(".roleSelect").select2();
});
ManageRoles.html
<form class="assignRoleForm">
<div class="row">
<div class="col-sm-12">
<label>Roles</label>
<select class="roleSelect form-control" multiple="multiple" required>
<option value="">Select Option</option>
<option value="1">ADMIN</option>
<option value="2">MANAGER</option>
</select>
</div>
</div>
<br/>
<div class="text-center">
<button type="submit" class="btn btn-success"> Assign </button>
<button type="button" class="btn btn-danger"> Close </button>
</div>
</form>
select2 Import structure
root\client\vendor\select2\select2-bootstrap.css
root\client\vendor\select2\select2.js
root\client\vendor\select2\style\select2.css
Below is the snapshot of the current output.
****************** Updated *******************
Upon doing this console.log($('.roleSelect').get(0)); I get below in console log
<select class="roleSelect form-control" multiple="multiple" required="">
<option value="">Select Option</option>
<option value="fov9sPjiXtbRdJccR">ADMIN</option>
<option value="ga4p3FwQ76LH4Nq8y">MANAGER</option>
</select>
I would try the following:
Template.ManageRoles.onRendered(function() {
this.$(".roleSelect").select2({
placeholder: 'Select Option'
});
});
And then in the HTML leave the first option blank:
<option value=""></option>
Related
I found a way how to pop up a new text box after click on "Others" from the dropdown. But the problem here is database capture "Other" instead of the new data that I key in. For example I key in "Policeman" but it captured "Other" in my database.
<head>
<script type="text/javascript">
function showfield(name){
if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text"
name="other" />';
else document.getElementById('div1').innerHTML='';
}
</script>
</head>
<form action="https://apps3.xendsys.com/emv3/index.php/lists/xl080bdvq5cc8/subscribe" method="post">
<div class="box box-primary borderless">
<div class="box-header">
<h3 class="box-title">Website Subscribers</h3>
</div>
<select name="OCCUPATION" id="OCCUPATION"
onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="Student">Student</option>
<option value="Educator">Educator</option>
<option value="Designer">Designer</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>
<div class="box-footer">
<div class="pull-right"><input type="submit" class="btn btn-primary btn-flat" name="yt0" value="Subscribe"/></div>
<div class="clearfix"> </div>
</div>
</div>
</form>
What should I change ya?
I want to update values of two dropdowns as shown in attached image, have a look on html code for the same(using same css proprty for both select)
<div class="container-fluid" role="main" style="margin-top: 100px;">
<form id="allPhotoForm">
<fieldset>
<legend>
Total Pending photos : ${count} <input type="button"
id="allPhotoFormBtn" class="btn btn-primary btn-xs pull-right"
value="Update All">
</legend>
</fieldset>
<div class="checkbox">
<label> <input type="checkbox" class="checkbox1"
id="selecctall"> Select All
</label>
</div>
<select class="form-control" name="status" id="${imageId}">
<option value="APPROVED">Approved</option>
<option value="REJECTED">Rejected</option>
<option value="PENDING">Pending</option>
</select>
Reason : <span style="float: right;">
<select class="form-control" name="status">
<option value="Animal" id="animal">Animal</option>
<option value="Bad" id="bad">Bad</option>
<option value="Baby" id="baby">Baby</option>
<option value="Celebrity" id="celebrity">Celebrity</option>
<option value="Flower" id="flower">Flower</option>
<option value="God" id="god">God</option>
<option value="Good" id="good">Good</option>
<option value="Others" id="others">Others</option>
</select>
</span>
and
<div class="checkbox"><label> <input type="checkbox" class="checkbox1 status" value="id=${id}&objectId=${imageId}&status=&reason=">Check me out
</label>
</div>
AJAX code for the same is as follows which binds all input data and pushes to API
$('#allPhotoFormBtn').on(
"click",
function(event) {
event.preventDefault();
var allCheckBox = document.querySelectorAll('.status');
var data = [];
$(allCheckBox).each(
function(index) {
if ($(this).is(':checked')) {
var status = $(
$(this).parent().parent().prev())
.val();
data.push($(this).val().replace("status=",
"status=" + status));
}
});
$.ajax({
url : "/curation/updateAll",
data : {
'data' : data.join(',')
},
type : "POST",
success : function(response) {
if (response)
location.reload();
},
error : function(rs) {
console.log(rs);
}
})
});
I am able to fetch one drop down value successfully, but unable to fetch another one, below statement gives only one dropdown value but not both.
var status = $($(this).parent().parent().prev()).val();
You are searching all dropdowns in the DOM by the css class ".status" but, in your code, dropdowns have not css class but both a "name" attribute set to status. So either you change your dropdowns adding class="status" or you have to change the way you search for them in js.
By the way in html 4 having more elements with same name attribute is legit but not reccomended, in html 5 now is consider error.
In your case you can modify your html like this:
<select class="form-control" class="status" id="${imageId}">
<option value="APPROVED">Approved</option>
<option value="REJECTED">Rejected</option>
<option value="PENDING">Pending</option>
</select>
Reason : <span style="float: right;">
<select class="form-control" class="status">
<option value="Animal" id="animal">Animal</option>
<option value="Bad" id="bad">Bad</option>
<option value="Baby" id="baby">Baby</option>
<option value="Celebrity" id="celebrity">Celebrity</option>
<option value="Flower" id="flower">Flower</option>
<option value="God" id="god">God</option>
<option value="Good" id="good">Good</option>
<option value="Others" id="others">Others</option>
</select>
without changing your js.
I have a drop-down form on a landing page that needs to change the Submit button URL upon form submission. See screen shot below:
Drop Down Screeshot
Here is the code for the form:
<form action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">
<input type="hidden" name="pageVariant" value="a">
<fieldset class="clearfix" style="width: 483px; height: -21px;">
<div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
<select id="which_best_describes_your_company" name="which_best_describes_your_company" class="text form_elem_which_best_describes_your_company">
<option value="">Select One</option>
<option value="Tire Dealer">Tire Dealer</option>
<option value="Auto Service Dealer">Auto Service Dealer</option>
<option value="Tire Wholesaler">Tire Wholesaler</option>
<option value="Auto Parts Shop">Auto Parts Shop</option>
<option value="Warehouse Distributor">Warehouse Distributor</option>
<option value="Jobber">Jobber</option>
<option value="Other">Other</option>
</select>
</div>
</fieldset>
</form>
I've found a few codes that seem like they could work, but I'm not experienced enough to a) alter the code for a dropdown menu and b) add more than one or two URLs (there are six or so options). Can anyone help?
Many thanks in advance :)
ETA: I'm not actually able to edit the form code, as it's drag-and-drop in my editor.
As I understand your code, the pageId is the important information. So I would put this as the value of your dropdown (below is just dummy data, needs to be replaced with actual pageIds) and set the value in the onchange method.
<form action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">
<input type="hidden" name="pageVariant" value="a">
<fieldset class="clearfix" style="width: 483px; height: -21px;">
<div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
<select id="which_best_describes_your_company" name="which_best_describes_your_company"
class="text form_elem_which_best_describes_your_company" onchange="selectionChanged(this.value)">
<option value="">Select One</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">Tire Dealer</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef33">Auto Service Dealer</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef34">Tire Wholesaler</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef35>Auto Parts Shop</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef36">Warehouse Distributor</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef37">Jobber</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef38">Other</option>
</select>
</div>
</fieldset>
</form>
<script>
function(selectedPageId){
document.getElementById('pageId).value = selectedPageId
}
</script>
Use a listener on the select element to capture the selected value and append or use it to modify the form action. The following example appends the selected value to the form action:
HTML:
<form id="form" action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32"><input type="hidden" name="pageVariant" value="a">
<fieldset class="clearfix" style="width: 483px; height: -21px;">
<div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
<select onchange="updateFormAction()" id="which_best_describes_your_company" name="which_best_describes_your_company" class="text form_elem_which_best_describes_your_company"><option value="">Select One</option><option value="Tire Dealer">Tire Dealer</option><option value="Auto Service Dealer">Auto Service Dealer</option><option value="Tire Wholesaler">Tire Wholesaler</option><option value="Auto Parts Shop">Auto Parts Shop</option><option value="Warehouse Distributor">Warehouse Distributor</option><option value="Jobber">Jobber</option><option value="Other">Other</option></select>
</div>
</fieldset>
</form>
Javascript:
function updateFormAction() {
var selectedVal = document.getElementById('which_best_describes_your_company').value
var form = document.getElementById('form')
form.setAttribute('action', form.action + '&company='+selectedVal)
}
Here is the fiddle to test it : https://jsfiddle.net/h23g6o3x/
I am using bootstrap select Bootstrap-select v1.7.2 in Angular. When I select some option from drop down it selects some other option.
Plunker is setup here:
http://plnkr.co/edit/HPPlxx?p=preview
(code is in dashboard.html and dashboard.js)
That's how I am creating it. bootstrap-dropdown is the directive that initiates the drop-down.
<form role="form" name="frmVariableConfig" ng-submit="vm.saveChanges()">
<select ng-model="vm.CurrCustomer.Logic" name="ddlLogic" check-validation class="validate[required]" bootstrap-dropdown >
<option ng-repeat="logic in vm.Logics" value="{{logic.value}}">{{logic.displayName}}</option>
</select>
<button type="submit" class="btn btn-sm text-right">Save</button>
</form>
This should fix your problem. You need a blank state option. Also it helps to use ng-options rather than using ng-repeat in the option. Hope this solves your problem!
<div ng-controller="dashboard as vm">
<div class="block-area">
<div class="row col-md-12 ">
<h3 class="block-title"> {{vm.title}}</h3>
<form role="form" name="frmVariableConfig" ng-submit="vm.saveChanges()">
<select required ng-model="vm.CurrCustomer.Logic" name="ddlLogic" check-validation class="validate[required]" ng-options="logic.displayName for logic in vm.Logics track by logic.displayName" bootstrap-dropdown >
<option value="">Pick One</option>
</select>
<button type="submit" class="btn btn-sm text-right">Save</button>
</form>
</div>
</div>
</div>
You should use ng-options to populate the option elements of a select input.
Like so:
<select ng-model="vm.CurrCustomer.Logic" data-ng-options="logic.displayName for logic in vm.Logics track by logic.value" name="ddlLogic" check-validation class="validate[required]" bootstrap-dropdown >
<option value="">Select...</option>
</select>
EDIT
Use the following:
<select ng-model="vm.CurrCustomer.Logic" data-ng-options="logic.displayName for logic in vm.Logics" check-validation class="validate[customFunc]" bootstrap-dropdown>
<option style="display:none" value="">Select</option>
</select>
where customFunc is a new custom validation function you create to check that the selected value is not "".
<label>Project Type </label>
<div>
<select name="category" id="category" class="form-control ">
<option value="">Select Project Type</option>
<option value="Independent_House">Independent House</option>
<option value="Duplex_House">Duplex House</option>
<option value="Pent_House">Pent House</option>
</select>
</div>
<div class="cato" id="category_Independent_House" style="display:none">
<input type="button" id="addindependant" value="Add Property" />
<div id="cato_Independent_House">
<div class="form-group">
<label>Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<div class="cato" id="category_Duplex_House" style="display:none">
<input type="button" id="addduplex" value="Add Property" />
<div id="cato_Duplex_House">
<div class="form-group">
<label >Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<div class="cato" id="category_Pent_House" style="display:none">
<input type="button" id="addpenthouse value="Add Property" />
<div id="cato_Pent_House">
<div class="form-group">
<label >Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<script type="text/javascript">
js(function() {
js('#addindependant').click(function(e){
js('#cato_Independent_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
js('#addduplex').click(function(e){
js('#cato_Duplex_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
js('#addpenthouse').click(function(e){
js('#category_Pent_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
});
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('#category_'+selection).show('slow');
});
});
</script>
This is my code. When I select the category based upon the category selected the divs cato_Independent_House cato_Duplex_House and category_Pent_House get appended to their respective categories.
Consider first independant house is selected from drop down so its respective cato_Independent_House gets appended to the div with id id="category_Independent_House" on click of the button.after that when duplex house is selected from drop down its respective 'cato_Duplex_House' gets appended to div with id="cato_Duplex_House" on click of the button.
But when I go back and select Independant house it must not show previous selected div until the button is clicked. But here the div is already been displayed even the button is not clicked when I go back.The previous menu should show its div only when the button is clicked.i.e, the previous divs must get empty or removed when other option is selected.How to do this?
js
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('.cato').each(function() {
console.log(js('.cato'));
if(js(this).attr('data-visible') != "true") {
js(this).hide();
}
});
js('#category_'+selection).show('slow');
});
js('.addProperty').click(function(){
js(this).parents('.cato').attr('data-visible','true');
});
});
html
<input type="button" id="addduplex" value="Add Property" class="addProperty" />
add class addProperty to all your add property input
Working JsFiddle Link. I guess this is what you wanted
You should use the jquery hide method to hide the others divs depending on wich one you have selected:
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('#category_'+selection).show('slow');
if(selection=="Independent_House"){
js('#cato_Duplex_House').hide();
js('#cato_Pent_House').hide();
}else if(...){
{otherCases}
});});
And if you want to clear also the inputs selection of each div you could do something like this:
js("#input_controller_id_to_clear")[0].selectedIndex = -1;