I have four dropdown, and I am manually filling them.
Now I want to add a javacsript that when I select first dropdown option, then in the second third fourth dropdowns, that item or option can be removed.
And same flow goes for second third and fourth and so on.
I am giving my code but till now, it is not working fine.
I am only tring for the first ladder, that is when option in first is selected then item removed from second, third and fourth dropdowns.
function RemoveItems(){
var List1 = document.getElementById("ddlSortField");
var sortList1 = List1.options[List1.selectedIndex].text;
var List2 = document.getElementById("ddlSortField2");
var sortList2 = List2.options[List2.selectedIndex].text;
List2.options.remove(sortList1);
var List3 = document.getElementById("ddlSortField3");
var sortList3 = List3.options[List3.selectedIndex].text;
List3.options.remove(sortList2);
var List4 = document.getElementById("ddlSortField4");
var sortList4 = List4.options[List4.selectedIndex].text;
List4.options.remove(sortList3);
}
In your code:
> function RemoveItems(){
Variable names starting with a capital letter are, by convention, reserved for constructors, so:
function removeItems() {
> var List1 = document.getElementById("ddlSortField");
> var sortList1 = List1.options[List1.selectedIndex].text;
So sortList1 will be a string.
> var List2 = document.getElementById("ddlSortField2");
> var sortList2 = List2.options[List2.selectedIndex].text;
> List2.options.remove(sortList1);
The remove method of the options collection takes a single parameter that is an index of one of the options. You have not shown what the value of sortList1 nor how many options List2 has. Note that the options collection is live, so if you remove an option, the indexes of other options may be adjusted so that they are contiguous from 0 to options.length - 1.
You can use such code : jsFiddle.
Basically, you first bind the change event to each list and when you change the value you hide these elements in all lists after...
I've made a slightly different one than #Muhammad Omair's, this one is a bit more dynamic. Note that this is jQuery
var removeSelection = function(select) {
$('select').filter(':not(#' + select.attr('id') + ')').each(function() {
var index = select.find(':selected').index();
$(this).find('option:eq(' + index + ')').remove();
});
};
$(function() {
$('select').change(function() {
removeSelection($(this));
});
});
And here's a jsfiddle of it http://jsfiddle.net/cA3F9/
Use jQuery to remove option
$(document).ready(function(){
$('#ddlSortField').change(function(){
var index = $("#ddlSortField option:selected").val();
$('#ddlSortField2 option:eq(' + index + ')').remove();
$('#ddlSortField3 option:eq(' + index + ')').remove();
$('#ddlSortField4 option:eq(' + index + ')').remove();
});
});
Note in your html your option value must be same like this:
<select id="ddlSortField">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>
<select id="ddlSortField1">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>
Related
I have to post data via ajax and need the name attribute array indexes to reset.
For example:
1st row:
<select data-placeholder="Colours" class="colours chosen-select"
multiple tabindex="4" name="colours[0][]">
<option value="">Red</option>
<option value="">Orange</option>
</select>
2nd Row dynamically added:
<select data-placeholder="Colours" class="colours chosen-select"
multiple tabindex="4" name="colours[1][]">
<option value="">Red</option>
<option value="">Orange</option>
</select>
The name colours array must increment by 1 everytime I add, as well as reset the values when I remove.
I have looked around but not found any solution.
Here is what I have:
Adding:
var tbl = $("#service");
$("#addRowBtn").click(function () {
var count = $('#rowCount tr').length;
$("<tr>" +
"<td>" +
"<select data-placeholder=\"Colours\" class=\"colours chosen-select\"
multiple tabindex=\"4\"\ name=\"colours[" +
count +
"][]\">" +
"<option value=\"\">Red</option>" +
"<option value=\"\">Orange</option>" +
"</select></td>" +
"<td><i style=\"color:#d64830\" class=\"delRowBtn fa fa-minus-
circle\"></i></td></tr>").appendTo(tbl);
Deleting a row:
$(document.body).delegate(".delRowBtn", "click", function () {
$(this).closest("tr").remove();
});
I have added var count to increment the indexes, but I'm not able to reset the values when removing.
Please help!
You can try to cycle all select of your table and change the attribute "name" of each select everytime you delete an item.
$('#rowCount tr td select').each(function(idx, item){
$(item).attr("name", "colours[" + idx + "][]")
});
update
like suggest #ChayimFriedman the cool version of previous suggestion
$('#rowCount select').attr('name', function(idx) { return "colours[" + idx + "][]"; });
I had someone who did this script (credit Chyno Deluxe) that generate a list of menu whatever we write on the box, the question is, I need to generate a sequence of number that continuously added to it
here is the example needed,
<li id='item1'></li> <li id='item2'></li> <li id='item3'></li> <li id='item4'></li>
the number generated beside item'#' , 1,2,3,4,5,6
I had this that generate number, but it was fixed number, here
$.map($(Array(8)),function(val, i) { return i; })
this one only make like this
1,2,3,4,5,6,7,8
the script
(function($) {
"use strict";
var t2h = {
buildHTML: function() {
var i, list, type = this.htmlSelect.options;
if (type[1].selected) {
//console.log(type[1].text);
list = "<select>";
list += "\n";
for (i = 0; i < this.get_items().length; i++) {
list += " <option>";
list += this.get_items()[i];
list += "</option>";
list += "\n";
}
list += "</select>";
you can see the demo below with jquery code
that will generate
<select>
<option>menu 1</option>
<option>menu 2</option>
</select>
I need to improve it by adding tag id='' + number on it, like this
<select>
<option id='item1'>menu 1</option>
<option id='item2'>menu 2</option>
</select>
demo : [a link] http://codepen.io/diden/pen/YwwVKO
Hope I can get help with this here, Thank you guys :)
for (i = 0; i < this.get_items().length; i++) { // here i will go from 0 to the length of the items the select will have -1
list += " <option>"; // for each of these values of i, we add the first part of the html to list, which is a string variable
list += this.get_items()[i]; // this adds the ith text that the user wrote, but it´s 0 index based instead of starting with 1
So what you want is just add the id correlated to index of the line the user entered . And this is just i+1 !
So:
list += " <option id='item"+(i+1)+"'>"; // we open open and close "" to add (i+1) which is a varibale, and its the id we wanted
concatenate "item" with the iterator of your for loop plus one (i + 1). and set that as the id while looping through the items. (Note that i starts at zero so if you want it to start with 1 then you have to add 1 to it)
I have a HTML form which I need help with adding and removing data using jQuery (or JavaScript).
$('.purchase-car').on('click', 'button', function(event) {
event.preventDefault();
/* Act on the event */
var carName = $('.purchase-car select').val();
var carPrice = $('.purchase-car select').find(':selected').data('price');
var carQuantity = $('.purchase-car input[name="quantity"]').val();
var totalPrice = carPrice * carQuantity;
var orderToAdd = '<li>' + '<span>' + carName + ' (' + carQuantity + ')</span> <span>remove</span>' + '</li>';
$('ul').prepend(orderToAdd);
$('#payment-amount').html(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>volvo (1) <span>remove</span>
</li>
<li>mercedes (2) <span>remove</span>
</li>
</ul>
<p>Total Price: <span id="payment-amount">30</span>
</p>
<div class="purchase-car">
<select>
<option value="volvo" data-price="10">Volvo ( $10 )</option>
<option value="saab" data-price="20">Saab ( $20 )</option>
<option value="mercedes" data-price="10">Mercedes ( $10 )</option>
<option value="audi" data-price="30">Audi ( $30 )</option>
</select>
<input type="number" name="quantity" value="1">
<button type="submit">Add</button>
</div>
There will be one select field and one input field, once I click add (on submit) both of the values should be added in a ul as list item. I have successfully done so. But I need a calculation here.
Like, what's the total price of selected objects. Also It should subtract from total price when I remove particular object.
http://jsfiddle.net/getanwar/s7ob01o1/
Update: I don't want to insert those data directly to the DOM. Because this is a part of another form and I don't want this data to be editable from console or via developer tools. So if I could store these data into an array or an object and calculate from there would be really helpful.
Taking your update into consideration, you should create a global variable.
var vehicles = new Array;
To increase the value, in the function where you insert the vehicle add the line:
var currentValue = parseInt($("#payment-amount").html());
$("#payment-amount").html(curentValue + (carPrice * carQuantity));
vehicles.push({price: carPrice, quantity: carQuantity});
Then to update the price when you remove one:
$("ul").on("click", "li span", function() {
var index = $(this).parent().index();
var currentValue = parseInt($("#payment-amount").html());
var removeValue = vehicles[index]['price'] * vehicles[index]['quantity'];
$("#payment-amount").html(currentValue - removeValue);
vehicles.splice(index, 1);
$(this).parent().remove();
});
I am still trying to work this out. Currently this is the way it looks, It works on JSFiddle but on my for it only clones once and the clone has data in it that when changed, changes the 1st item
I am trying to streamline my very large form to speed up the processes. I have a section that repeats multiple time that I want to reduce to having coded once with a button to add more if needed. The section cannot be cloned as each is separate and specific. Also note that they each need a unique identifier. As I have it not they ar "transectA", "transectB", etc. Below is a small snippet to give you an idea wof what I am working with. Each select actually has 12 options and there are 14 transects.
<div class="transect">
<select name="transectA" id="transectA">
<option value="">Transect A </option>
<option value = "RIGHT/SED-CORE">RIGHT/CORE</option>
<option value = "RIGHT/HOOP">RIGHT/HOOP</option>
<option value = "RIGHT/CHLPHL-1">RIGHT/TEMPLATE</option>
<option value = "RIGHT/NONE">RIGHT/NONE</option>
<option value = "CENTER/SED-CORE">CENTER/CORE</option>
<option value = "CENTER/HOOP">CENTER/HOOP</option>
<option value = "CENTER/CHLPHL-1">CENTER/TEMPLATE</option>
<option value = "CENTER/NONE">CENTER/NONE</option>
<option value = "LEFT/SED-CORE">LEFT/CORE</option>
<option value = "LEFT/HOOP">LEFT/HOOP</option>
<option value = "LEFT/CHLPHL-1">LEFT/TEMPLATE</option>
<option value = "LEFT/NONE">LEFT/NONE</option>
</select> </div>
I have attempted a couple of solutions (hide/show) & clone but neither give me a satisfactory result. All of the attempts I have tried with append seem to produce basically what the show/hide does.
<script>
$(document).ready(function() {
var $transect = $('.transect');
$transect.on('change', 'select', function() {
var $this = $(this),
$parent = $this.parent(),
$transects = $('.transect');
if($transects.length < 14 && !$parent.next('.transect').length) {
var ltr = String.fromCharCode(65 + $transects.length),
label = 'transect' + ltr;
$transect
.clone(true)
.find('select')
.attr('name', 'transect' + ltr)
.attr('id', 'transect' + ltr)
.find('option:eq(0)')
.text('Transect ' + ltr.toUpperCase())
.end()
.end()
.insertAfter($parent);
}
});
})
</script>
As always, your help will be greatly appreciated
Can anyone advise me why all of these solutions work in JSFiddle but not on my form. Even the script above works on the fiddle but only clones once on the form
you could do something like this:
var counter = 0
$('.add-new-button').click(function(){
$('#transectA').append('<option id="input ' + counter +'" value = "RIGHT/SED-CORE">RIGHT/CORE</option>');
counter++;
});
This will add a new option to #transectA. You can use this method to add form fields elsewhere as well. You can use the counter to make sure it has a unique ID or name or whatever. Good luck
You should be able to combine clone and some DOM manipulation to get the desired affect: http://jsfiddle.net/fjJfk/2/
But you'll likely need to make this example match your own markup/situation.
var $transect = $('._25');
$transect.on('change', 'select', function() {
var $this = $(this),
$parent = $this.parent(),
$transects = $('._25');
if($transects.length < 14 && !$parent.next('._25').length) {
var ltr = String.fromCharCode(65 + $transects.length);
$transect
.clone(true)
.find('select')
.attr('name', 'transect' + ltr)
.attr('id', 'transect' + ltr)
.find('option:eq(0)')
.text('Transect ' + ltr)
.end()
.end()
.insertAfter($parent);
}
});
You can use following;
HTML:
<div id="tempSelect" style="display:none">
<select name="transect" data-mini="true" id="transect">
<option value="">Transect_ </option>
<option value = "RIGHT/SED-CORE">RIGHT/CORE</option>
<option value = "RIGHT/HOOP">RIGHT/HOOP</option>
<option value = "RIGHT/CHLPHL-1">RIGHT/TEMPLATE</option>
<option value = "RIGHT/NONE">RIGHT/NONE</option>
</select>
</div
<fieldset>
<div class="_100">
</div>
</fieldset>
<input type="button" name="newSelect" id="newSelect" value="New"/>
JS:
$("#newSelect").on("click", function() {
var lastSelect = $("._100 select").last().attr("name");
if (lastSelect != undefined) {
var temp = lastSelect.split("_");
var id = parseInt(temp[1]) + 1;
} else {
var id = 0;
}
$("#tempSelect select").attr("name", "transect_" + id);
$("#tempSelect select").attr("id", "transect_" + id);
$("#tempSelect select option:first").text("Transect_" + id);
$("._100").append($("#tempSelect").html());
});
Here is working demo: jsfiddle
Is there a way add another dropdown form to this script?
http://javascript.internet.com/navigation/connected-comboxes.html
Or do you happen to have another script that does the same job? I need three level connected dropdown boxes. Each one should be filtered according to previous selection and should be empty before that selection is made...
Thanks in advance...
i was bored... try this. requires jquery
html:
<form>
<select id="s1">
<option>One</option>
<option value="two">Two</option>
<option>Three</option>
</select>
<select id="s2"></select>
<select id="s3"></select>
</form>
js:
// chain select boxes select1 and select2
//
// select1 should have options set already choices is an object
// literal with the level2 options for each value in select1.
//
// options can be either scalars or arrays of length 2,
// in which case val[0] is the value and val[1] is the label text
//
//
var chain = function(select1, select2, choices) {
select1.change( function() {
select2.find('option').remove();
var options = ['<option>---</option>'];
var value = $(this).val();
if( value in choices ) {
var subchoices = choices[value]
for(var i = 0; i < subchoices.length; i++) {
if( subchoices[i].constructor == Array) {
options.push('<option value="'
+ subchoices[i][0]
+ '">'
+ subchoices[i][1]
+ '</option>');
}
else {
options.push('<option>'
+ subchoices[i]
+ '</option>');
}
}
}
select2.append($(options.join('')));
} );
select1.change();
}
you can then define sub-lists
var sub1 = { One: ["One1", "One2", "One3"],
two: [["two1", "Two1"], "Two2"]
};
var sub2 = {two1: [4,5,6,[7, 8]]};
and activate like so:
$( function() {
chain( $('#s1'), $('#s2'), sub1);
chain( $('#s2'), $('#s3'), sub2);
});