I am trying to add cloning functionality for select boxes.
I have 3 select box: country, state, city and first user select the country and on id basis state select box is populated with options and same with city dropdown will populate only when state is selected.
Then I have add more option where I have regenerate everything. so I am cloning my div but the problem when I change my country instead of showing new state dropdown its returns to previous drop down:
$('.country').on('change',function(){
var id = $(this).val();
callAjax(id);
});
$('.state').on('change',function(){
var id = $(this).val();
callAjax(id);
});
$('#btClone').on('click', function () {
$('#country')
.clone()
.attr('id', 'country_' + i)
.attr('name', 'country_' + i)
.appendTo("#container2");
$('#state')
.clone()
.attr('id', 'state_' + i)
.attr('name', 'state_' + i)
.appendTo("#container2");
i =i+1;
});
My Html looks like
<div id="container1">
<select id="country" name="country" class="hidden country">
</select>
<select id="state" name="state" class="hidden state">
</select>
<select id="city" name="city" class="hidden city">
</select>
<span id="selected-profile"></span>
<div id="addons" class="hidden">
<input type="button" id="btClone" value="Clone the list" style="float:right;" />
</div>
</div>
<div id="container2" style="display:none;"></div>
I want when i click on add new then chose country then change something my ajax call again call but as of now i am unable to do that because i already have options
what exactly do you mean with "instead of showing new state dropdown its returns to previous drop down". I tried your code in a fiddle and it's cloning as expected.
function initRow($row){
$row.find('select[name="country"]').on('change', function () {
var thisRow = $(this).closest('div.row');
var stateDD = thisRow.find($('select[name="state"]'));
stateDD.show();
stateDD.on('change',function(){
var cityDD = thisRow.find('select[name="city"]');
cityDD.show();
cityDD.on('change',function(){
});
});
});
}
$('#container1 .row').each(function(){
initRow($(this));
});
$('#btClone').click(function(){
var rowTemplate = $('#container1 > .row').eq(0).clone();
rowTemplate.find('select[name="state"]').hide();
rowTemplate.find('select[name="city"]').hide();
initRow(rowTemplate.appendTo($('#container1')));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container1">
<div class="row">
<select name="country" class="hidden country">
<option value=1>country 1</option> <option value=2>country 2</option>
</select>
<select name="state" class="hidden state" style="display:none;">
<option value=1>state 1</option> <option value=2>state 2</option>
</select>
<select name="city" class="hidden city" style="display:none;">
<option value=1>city 1</option> <option value=2>city 2</option>
</select>
</div>
</div>
<input type="button" id="btClone" value="Clone the list" style="float:right;" />
Related
How to add multiple options from the selection box to the data attribute data-clc in the hyperlink?
Working in textarea but TestLink hyperlink not working.
$("#selection").change(function() {
$('#selected').html(' ');
$("#selection option:selected").each(function() {
var $this = $(this);
if ($this.length) {
var selText = $this.text();
console.log(selText);
$('#selected').append(selText + ', ');
$('#comeMan').attr('data-bid', selText);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple="" style="width:200px;" id="selection" name="fm_fields[]">
<option value="90" selected>Collection1</option>
<option value="91" selected>Collection2</option>
<option value="92">Collection3</option>
<option value="93">Collection4</option>
<option value="94">Collection5</option>
<option value="95">Collection6</option>
</select>
<br/>
<br/>
<div>
TestLink
<textarea id="selected" rows="1" cols="50" readonly></textarea>
</div>
Goal
For example:
<a href="#"
id="comeMan" data-clc=" Collection2,Collection3,Collection4">TestLink</a>
Rather than build up a string of the selected items, you can just set the attribute to the value (val() in JQuery) of the select element.
Also, to more easily work with data- attributes, JQuery provides the .data() method (used below);
$("#selection").change(function() {
$('#comeMan').data('clc', $('#selection').val());
console.log( $('#comeMan').data('clc'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple style="width:200px;" id="selection" name="fm_fields[]">
<option value="90">Collection1</option>
<option value="91">Collection2</option>
<option value="92">Collection3</option>
<option value="93">Collection4</option>
<option value="94">Collection5</option>
<option value="95">Collection6</option>
</select>
<br/>
<br/>
<div>
TestLink
</div>
I am building a search result filtering feature. I have a number of select2 dropdown boxes where the user can select multiple values from to either hide or show divs with matching class values. I have a number of divs with classes containing values matching values in the select2 dropdown boxes. How do I go about coding this functionality?
I can only get this to work for one selection, I'd like to be able to select multiple options from the dropdowns.
$('select.filterCandidates').bind('change', function() {
$('select.filterCandidates').attr('disabled', 'disabled');
$('#candidates').find('.row').hide();
var critriaAttribute = '';
$('select.filterCandidates').each(function() {
if ($(this).val() != '0') {
critriaAttribute += '[data-' + $(this).data('attribute') + '*="' + $(this).val() + '"]';
}
});
$('#candidates').find('.row' + critriaAttribute).show();
$('#filterCount').html('Showing ' + $('div#candidates div.row:visible').length + ' Matches');
$('select.filterCandidates').removeAttr('disabled');
});
$('#reset-filters').on("click", function() {
$('#candidates').find('.row').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<br>
<h4>Search Form</h4>
<br>
</div>
<div class="col-md-4">
<div class="form-group">
<select id="type" class="form-control filterCandidates" data-attribute="type">
<option value="0">Candidate Type</option>
<option value="CA">CA</option>
<option value="CFA">CFA</option>
<option value="CFO">CFO</option>
<option value="CIMA">CIMA</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select id="role" class="form-control filterCandidates" data-attribute="role">
<option value="0">Preferred Role</option>
<option value="Analyst">Analyst</option>
<option value="Associate">Associate</option>
<option value="CFO">CFO</option>
<option value="FD">FD</option>
<option value="FM">FM</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select id="roleType" class="form-control filterCandidates" data-attribute="roleType">
<option value="0">Preferred Role Type</option>
<option value="Permanent">Permanent</option>
<option value="Contract/Interim">Contract/Interim</option>
<option value="Internship">Internship</option>
</select>
</div>
</div>
</div>
just to give you a rough idea as you have not provided any code.
<script>
var SelectedValues = $('#ddlSelect option:selected');
var NotSelectedValues $('#ddlSelect option:not(:selected)');
$(SelectedValues ).each(function () {
$("."+$(this).val()+"").show(); //show all those divs containing
//this class
});
$(NotSelectedValues ).each(function () {
$("."+$(this).val()+"").hide();//hide all those divs containing
//this class
});
</script>
This is a rough idea , The above script will show all of the divs containing the classes you have selected in your select2 with id "ddlSelect" and hide those which you have not selected.
you can put this into a function and call it on onchange event of ddlSelect or whatever and however you want it to.
I'm creating a form that allows a user to select an amount of services, and then a total is displayed. I have it working to where I can keep the running total of one drop down menu service, but then I can't figure out how to add additional services from other drop down menus. For example, I need it so that if someone selects '3' from one drop down menu, it will times that value by 10 (I have that part done), but then also be able to select a '4' from the next dropdown menu and times that by a value, and then display a total.
Fiddle: https://jsfiddle.net/7jrch7w6/
I'm very new to JavaScript and JQuery, so feel free to give suggestions if you see a better way or if my code is garbage. Thanks!
Here's my code:
<form>
<div id="carpet-services">
<div class="form-group">
<!--how many bedrooms-->
<label class="control-label" for="carpet_cleaning">Bedrooms</label>
<select class="form-control" id="carpet_cleaning">
<option value="0-bedroom">0</option>
<option value="1-bedroom">1</option>
<option value="2-bedroom">2</option>
</select>
<label class="hide" for="0-bedroom">0</label>
<label class="hide" for="1-bedroom">1</label>
<label class="hide" for="2-bedroom">2</label>
<!--how many dining rooms-->
<label class="control-label" for="dining_rooms">Dining Rooms</label>
<select class="form-control" id="dining_rooms">
<option value="0-diningRoom">0</option>
<option value="1-diningRoom">1</option>
<option value="2-diningRoom">2</option>
</select>
<label class="hide" for="0-diningRoom">0</label>
<label class="hide" for="1-diningRoom">1</label>
<label class="hide" for="2-diningRoom">2</label>
</div>
</div>
<h4>Total Price</h4>
<p id="output1"></p>
JS
$("#carpet_cleaning").change(function () {
var bedrooms = $("#carpet_cleaning").val();
var diningRooms = $("#dining_rooms").val();
var bedroomPrice = '';
var diningRoomPrice = '';
if (carpet_cleaning){
var bedroomsLabel = $("label[for="+bedrooms+"]").text();
bedroomPrice = 'Your price quote is: ' + bedroomsLabel * 10;
}
$("#output1").text(bedroomPrice).fadeIn();
});
One line of CSS:
label.hide {display: none;}
First of all, there's no need to use labels for every drop down option, that's what value attribute is for:
<form>
<div id="carpet-services">
<div class="form-group">
<!--how many bedrooms-->
<label class="control-label" for="carpet_cleaning">Bedrooms</label>
<select class="form-control" id="carpet_cleaning">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<!--how many dining rooms-->
<label class="control-label" for="dining_rooms">Dining Rooms</label>
<select class="form-control" id="dining_rooms">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
<h4>Total Price</h4>
<p id="output1"></p>
</form>
Calculation can now be simplified and properly hooked up to change event of both drop downs:
$("#carpet_cleaning,#dining_rooms").change(function () {
var bedrooms = $("#carpet_cleaning").val();
var diningRooms = $("#dining_rooms").val();
var total = bedrooms * 10 + diningRooms * 20;
var totalPrice = 'Your price quote is: ' + total;
$("#output1").text(totalPrice).fadeIn();
});
I don't know if I got your question, but you can use $("#carpet_cleaning option:selected").val() to get the current selected value in a select component.
Fiddle: https://jsfiddle.net/7jrch7w6/4/
$("#carpet_cleaning").change(function () {
UpdateResult();
});
$("#dining_rooms").change(function () {
UpdateResult();
});
function UpdateResult()
{
var result = 'Your price quote is: ' + (($("#carpet_cleaning option:selected").val() * 10) + ($("#dining_rooms option:selected").val() * 20))
$("#output1").text(result).fadeIn();
}
I have a simple Bootstrap form with a select input:
<div class="form-group">
<label for="category" class="control-label col-sm-3">Category</label>
<div class="input-group col-xs-8">
<select class="form-control" name="category" id="category">
<option value="Fruit">Fruit</option>
<option value="Vegetables">Vegetables</option>
</select>
</div>
</div>
The users now have a requirement to be able to add a new option dynamically to the select menu rather than be restricted to the items on the select menu.
I'm not sure if it's possible to modify a select menu and how to make it consistent with the rest of the Bootstrap framework?
To add an option dynamically, there should be a UI button giving you that choice. To get user input, we can use the window.prompt method.
We then create an option element, set its value attribute and set its name. Then just append these elements and nodes to the DOM with appendChild
Try playing around with this. I added some items like Steak, potatoes and beer.
var addOption = document.getElementById("add-option");
var selectField = document.getElementById("category");
addOption.addEventListener("click", function() {
var item = prompt("What would you like");
var option = document.createElement("option");
option.setAttribute("value", item);
var optionName = document.createTextNode(item);
option.appendChild(optionName);
selectField.appendChild(option);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="category" class="control-label col-sm-3">Category</label>
<div class="input-group col-xs-8">
<select class="form-control" name="category" id="category">
<option value="Fruit">Fruit</option>
<option value="Vegetables">Vegetables</option>
</select>
</div>
</div>
<button id="add-option" class="btn btn-primary">Add a new option</button>
You mean something like this?
some select
<select id="region" class="selectpicker">
<option>region 1</option>
<option>region 2</option>
<option>region 3</option>
</select>
jquery js
$('.selectpicker').selectpicker();
$("#region").on('change', function () {
$(this)
.append('<option>region4</option><option>region5</option>')
.selectpicker('refresh');
});
I have a dropdown with two tiers. I want to get the option value from the item selected from the second dropdown list.
I have figured out how to do this for the first list, but I want to be able to grab the value for -any- list. In my jsfiddle, you'll see there's a value in console.log for any of the items in the Pie list when you click on them, but not for any of the items in the Trees or Cars lists when they're clicked.
I thought I could just give all of the selection lists the same ID, but apparently not. Any suggestions? I've done some searching, but haven't found what I'm looking for. I'm using D3 and jQuery already, so those are good, but plain javascript is also fine. Thanks!
jsfiddle is here.
<div class="ccms_form_element cfdiv_custom" id="indSelectors">
<label>Type:</label>
<select size="1" id="dropStyle" class=" validate['required']" title="" type="select" name="style">
<option value="">-Select-</option>
<option value="Pies">Pies</option>
<option value="Trees">Trees</option>
<option value="Cars">Cars</option>
</select>
<div class="clear"></div>
<div id="error-message-style"></div>
</div>
<div id="Pies" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Pies</label>
<select id="inds">
<option value="">- Select -</option>
<option value="28">Apple</option>
<option value="3">Cherry</option>
<option value="44">Pumpkin</option>
</select>
</div>
<div id="Trees" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Trees</label>
<select id="inds">
<option value="">- Select -</option>
<option value="38">Maple</option>
<option value="11">Oak</option>
<option value="14">Birch</option>
</select>
</div>
<div id="Cars" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Cars</label>
<select id="inds">
<option value="">- Select -</option>
<option value="39">Mazda</option>
<option value="62">Ford</option>
<option value="25">Toyota</option>
</select>
</div>
<div class="clear"></div><div id="error-message-style-sub-1"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#dropStyle").change(function () {
var targID = $(this).val();
$("div.style-sub-1").hide();
$('#' + targID).show();
})
d3.select('#inds')
.on("change", function () {
var sect = document.getElementById("inds");
var section = sect.options[sect.selectedIndex].value;
console.log("section:", section);
// do other stuff with the section name
});
</script>
Element IDs should be unique within the entire document and it is not a good practice to have same id for multiple elements.
what does document.getElementById("inds") or $("#inds") return? You will get the first element always.
Rather, use a class. Just change id="inds" to class="inds" and update code like below.
$('.inds')
.on("change", function () {
var section = $(this).val();
console.log("section:", section);
// do other stuff with the section name
});
Updated Fiddle
Try this jQuery Plugin
https://code.google.com/p/jquery-option-tree/
Demonstration:
http://kotowicz.net/jquery-option-tree/demo/demo.html