I have 4 dropdowns, 2 for the "From" destination and 2 for the "To" destination.
What I want to do is to update the #from div and the #to div based on the dropdown values.
For example on the "From" destination, if 1 and 5 is selected then the #from must show 1 -> 5
That means that while selecting the 1, it will show 1 -> until the user selects from the 2nd dropdown and it completes the sequence.
from
<select id="from_country">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="from_city">
<option value="1">4</option>
<option value="2">5</option>
<option value="3">6</option>
</select>
<br>
<br />
to
<select id="to_country">
<option value="1">7</option>
<option value="2">8</option>
<option value="3">9</option>
</select>
<select id="to_city">
<option value="1">10</option>
<option value="2">11</option>
<option value="3">12</option>
</select>
<div id="from"></div>
<div id="to"></div>
$('#from_country').change(function () {
var country = $('option:selected', this).val();
var city = $('#from_city').val();
$('#from').text(country + "->" + city);
})
$('#from_city').change(function () {
var city = $('option:selected', this).val();
var country = $('#from_country').val();
$('#from').text(country + "->" + city);
})
$('#to_country').change(function () {
var country = $('option:selected', this).val();
var city = $('#to_city').val();
console.log(country + "->" + city)
$('#to').text(country + "->" + city);
})
$('#to_city').change(function () {
var city = $('option:selected', this).val();
var country = $('#to_country').val();
$('#to').text(country + "->" + city);
})
Try this
demo
Here is a simple solution: http://jsbin.com/huvilegeso/edit?html,js,output. I only did it for the From section. The To section is very similar.
var from = [null, '->'];
$('#from_country').on('change', function() {
from[0] = $(this).val();
renderFrom(from);
});
$('#from_city').on('change', function() {
from[2] = $(this).val();
renderFrom(from);
});
function renderFrom(from) {
$('#from').html(from.join(' '));
}
You can do something like this.
$('#from_country').change(function () {
$('#from').text( $('#from_country :selected').text() + '->' +
$('#from_city :selected').text());
});
$('#from_city').change(function () {
$('#from').text( $('#from_country :selected').text() + '->' +
$('#from_city :selected').text());
});
$('#to_country').change(function () {
$('#to').text( $('#to_country :selected').text() + '->' +
$('#to_city :selected').text());
});
$('#to_city').change(function () {
$('#to').text( $('#to_country :selected').text() + '->' +
$('#to_city :selected').text());
});
Related
I'm using this bootstrap-select as my default select in my project.
Now I'm facing the problem on adding optgroup dynamically using jQuery.
My current code looks like this
<select id="ToDoList" name="_ToDoList" class="selectpicker show-tick form-control" data-live-search="true"></select>
<script>
var url = "#Url.Action("ToDoListDay", "Dropdown")";
var urlData = "#Url.Action("ToDoListData","Dropdown")";
$.get(url, function (e) {
var text_Employee = $("#ToDoList");
$.each(e, function (i, v) {
text_Employee.append($("<optgroup label=" + v.Description + ">"));
$.get(urlData, { DateParam: this.Description }, function (z) {
$.each(z, function (x, a) {
text_Employee.append($("<option data-tokens="+a.data_token+"/>").val(a.ID).text(a.value));
});
text_Employee.append($("</optgroup>"));
});
});
$('#ToDoList').selectpicker('refresh');
});
</script>
But the Select Output looks like this
<select id="ToDoList" name="_ToDoList" class="selectpicker show-tick form-control" data-live-search="true" tabindex="-98">
<optgroup label="Feb" 05="" 2018="">
</optgroup>
<option data-tokens="Feb" 05="" 2018="" asd="" value="25">asd</option>
<option data-tokens="Feb" 05="" 2018="" a="" value="26">a</option>
</select>
Instead of
<select id="ToDoList" name="_ToDoList" class="selectpicker show-tick form-control" data-live-search="true" tabindex="-98">
<optgroup label="Feb 05 2018">
<option data-tokens="Feb 05 2018 asd" value="25">asd</option>
<option data-tokens="Feb 05 2018 a" value="26">a</option>
</optgroup>
</select>
Json Response
The 1st Response (for optGroup)
[{"Description":"Feb 05 2018"}]
The 2nd Response (for options)
[
{"ID":25,"data_token":"Feb 05 2018 asd","value":"asd"},
{"ID":26,"data_token":"Feb 05 2018 a","value":"a"}
]
After a few review on my code I finally understand the logic of it and solve my problem.
First is I forgot to put ' ' on label (a basic error on my part)
text_Employee.append($("<optgroup label=" + v.Description + ">"));
that's why the result was data-tokens="Feb" 05="" 2018=""
Then second is I appended it on select instead of optGroup
Final Output looks like this
<select id="ToDoList" name="_ToDoList" class="selectpicker show-tick form-control" data-live-search="true"></select>
<script>
var url = "#Url.Action("ToDoListDay ", "Dropdown ")";
$.get(url, function(e) {
var text_Employee = $("#ToDoList");
$.each(e, function(i, v) {
console.log("Desc: " + v.Description);
OptGroup(v.value.toString(), v.Description.toString()).done(function() {
Options(v.value.toString(), v.Description.toString()).done(function() {
console.log("Done appending Group");
$('#ToDoList').selectpicker('refresh');
});
});
});
});
function OptGroup(value, Description) {
var dfrdOptGroup = $.Deferred();
var text_Employee = $("#ToDoList");
text_Employee.append($("<optgroup id='" + value + "' label='" + Description + "' >"));
console.log("1");
dfrdOptGroup.resolve();
return dfrdOptGroup.promise();
}
function Options(ID, Description) {
var dfrdOptions = $.Deferred();
var urlData = "#Url.Action("ToDoListData ","Dropdown ")";
var text_Employee = $("#" + ID + "");
$.get(urlData, {
DateParam: Description
}, function(z) {
$.each(z, function(x, a) {
console.log("2");
text_Employee.append($("<option data-tokens='" + a.data_token.toString() + "' />").val(a.ID).text(a.value));
});
dfrdOptions.resolve();
});
return dfrdOptions.promise();
}
</script>
I have multiple forms with one, two, three html select. I just want simple code if form select selected value equals to zero then console.log "please select order". Following is the script which I am working on.
$('form').submit(function(event){
event.preventDefault();
var dataitem = $(this).attr('data-item');
if (dataitem == 1) {
console.log(dataitem);
var $myform = $(this),
flavour1 = $myform.find( "select[name='flavour1']" ).val(),
drink = $myform.find( "select[name='drink']" ).val();
console.log("Flavour :" + flavour1 + ", Drink :" + drink);
} else if (dataitem == 2) {
console.log(dataitem);
var $myform = $(this),
flavour1 = $myform.find( "select[name='flavour1']" ).val(),
flavour2 = $myform.find( "select[name='flavour2']" ).val(),
drink = $myform.find( "select[name='drink']" ).val();
console.log("Flavour1 :" + flavour1 + ", Flavour2 :" + flavour2 + ", Drink :" + drink);
} else {
console.log(dataitem);
var $myform = $(this),
flavour1 = $myform.find( "select[name='flavour1']" ).val(),
flavour2 = $myform.find( "select[name='flavour2']" ).val(),
flavour3 = $myform.find( "select[name='flavour3']" ).val(),
drink = $myform.find( "select[name='drink']" ).val();
console.log("Flavour1 :" + flavour1 + ", Flavour2 :" + flavour2 + ", Flavour3 :" + flavour3 + ", Drink :" + drink);
}
});
please advice as i am stuck at this point of selection. If each select value == 0.
Thanks
Usualy if you have multiple components similar you can use:
$myform.find("select")
This will give you all "select" elements in your form. And then you can find the value one by one using:
$myform.find("select").each(function(index, value){
var valSelec = $(this).val();
///Make your if
})
I create a function: validateSelect() that search on all selects of form and verify if the option selected was empty, if true they return false.
Example:
$("form").submit(function(e) {
e.preventDefault();
if (validateSelect()) {
console.log('All are filled valid');
} else {
console.log('Invalid');
}
});
function validateSelect() {
var fleg = true;
$.each($('select option:selected'), function(key, val) {
if (val.value.length < 1) {
fleg = false;
}
});
return fleg;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
<select name="number">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="letter">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="submit">
</form>
The following code removes dropdown list values based on text entered in a textbox.
FIDDLE DEMO
JQUERY
var ddl = ('#ddl'),
txt = ('#txt');
$(txt).change(function() {
var x = $(txt).val(),
li = $(ddl).html();
if (x.length != 0) {
$(ddl).html(li);
$(ddl + ' :not([value="' + x + '"])').remove();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txt" type="text" placeholder="Enter a number...">
<select id="ddl">
<option value="0" selected="selected">Select...</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>
</select>
QUESTION
How to restore dropdownlist values back to initial state when a new value is entered into the textbox?
I have been attempting to use:
$(ddl).selectmenu("refresh");
but this stops the script from working as expected.
Like so
...
$(ddl).html(li);
$(ddl + ' :not([value="' + x + '"])').hide();
} else {
$(ddl + ' :not([value="' + x + '"])').show();
}
...
Instead of removing the item completely, you simply hide. When you empty the input field, re-show all the items.
You could try something like this:
var ddl = ('#ddl'),
txt = ('#txt');
$(txt).change(function () {
var x = $(txt).val(),
li = $(ddl).html();
$(ddl + ' option').show();
if (x.length != 0) {
$(ddl).html(li);
$(ddl + ' option:not([value="' + x + '"])').hide();
$(ddl + ' option[value="' + x + '"]').prop('selected',true);
}
});
I have two select box. on change event of first select box, i'm adding that text into second select box. but i don't want to add duplicate record.for this i'm using filter function,(if any text that has already added then i don't want to add again) but it's not working as i want.
html
<select id="ddlCategory">
<option value="0">Select Category</option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
</select>
<select multiple="multiple" id="my-select" name="my-select[]" class="multiDrop"> </select>
<select multiple="multiple" id="your-select" name="my-selectyour[]" class="multiDrop">
myJs:
$('#my-select').change(function () {
var getValue = $(this).find('option:selected').val();
var getText = $(this).find('option:selected').text();
var getCategory = $('#ddlCategory').find('option:selected').text();
if ($('#your-select > option').hasClass(getCategory)) {
$("#your-select > option").filter(function (index) {
if ($(this).html() == getText) {
return;
}
$('#your-select').append('<option value="' + getValue + '" class="' + getCategory + '">' + getText + '</option>');
});
} else {
$('#your-select').html('<option value="' + getValue + '" class="' + getCategory + '">' + getText + '</option>');
}
});
Jsfiddle
Here you go... my edited fiddle: http://jsfiddle.net/stoz1m6v/2/
This way it does not duplicate the entries in myselect...
you had some checking of class/category there which I removed, because I found it incorrectly done, however I could not comprehend how exactly you wanted to check the category...
and the script goes like this... I have changed only the change handler of the my-select:
$('#my-select').change(function () {
var getValue = $(this).find('option:selected').val();
var getText = $(this).find('option:selected').text();
var getCategory = $('#ddlCategory').find('option:selected').text();
if ($("#your-select > option").filter(function (index) {
return $(this).html() == getText; }).length ==0) {
$('#your-select').append('<option value="' + getValue + '" class="' + getCategory + '">' + getText + '</option>');
}
});
I'm trying to keep the list of values from drop-down selections when the browser back-button is click after the form has been submitted. I tried using Ben Alman's bbq jquery, but failed to get things working. Here's what I've been trying. Please help.
Many thanks in advance.
HTML
<form action="something.py" id="formName">
<table id = "tabName">
<tr>
<th>Name</th><th>Number</th>
</tr>
<tr>
<td>
<select id="myname" name="myname">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</td>
<td>
<select id="mynumber" name="mynumber">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="submit" />
</form>
JQuery:
var selected_value = [];
$('#mynumber').change(function() {
var name = $('#myname').val();
var number = $('#mynumber').val();
$("#tabName tr:last").before("<tr><td>" + name + "</td><td>" + number + "</td></tr>");
selected_value.push(name);
});
$('#formName').submit(function() {
$.bbq.pushState({
values: selected_value
});
//return false;
});
$(window).bind("hashchange", function(e) {
var values = $.bbq.getState("url");
if (selected_value === values) {
$(this).addClass("current");
} else {
$(this).removeClass("current");
}
});
My solution (without cookies or localStorage) based on location.hash:
function addRow(name, number){
$("#tabName tr:last").before("<tr><td>" + name + "</td><td>" + number + "</td></tr>");
}
$(function(){
if(location.hash){
var rows = location.hash.substr(1).split(';');
for(var i = 0; i < rows.length; i++){
var row = rows[i].split(',');
if(row.length == 2){
addRow(row[0], row[1]);
}
}
}
$('#mynumber').change(function() {
var name = $('#myname').val();
var number = $('#mynumber').val();
location.hash = location.hash + (location.hash ? ';' : '') + name + ',' + number;
addRow(name, number);
});
});
I think it does what you have asked for - if not, please give me some feedback in comments.
$('#formName').submit(function() {
$.bbq.pushState({
values: selected_value
});
//return false;
});
should be
$('#formName').submit(function() {
$.bbq.pushState({
values: selected_value
});
//return false;
});
and
var values = $.bbq.getState("url");
should be
var values = $.bbq.getState("values");