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>
Related
I am currently working on a dynamic dependent dropdown. I want a sidebar with each dropdown list depends on the one above it, so you based on what your selection is, the right data will show on the next selection. It should be Country -> Years -> Terms -> Movies. I don't know why my data won't retrieve data from the json file. I am new to programming so Any help would be greatly appreciated.
The Json file(moviessimple.js) format is like this:
{
"term": "2020W",
"Year": 2018,
"link": "https://www.imdb.com/title/tt6342440",
"title": "Funan",
"country": "France"
},
{
"term": "2020W",
"Year": 2017,
"link": "https://www.imdb.com/title/tt6516966",
"title": "And Then They Came for Us",
"country": "United States"
},
{
"term": "2020W",
"Year": 2019,
"link": "https://www.imdb.com/title/tt6751668",
"title": "Parasite",
"country": "South Korea"
},
Right now, my HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Test2</title>
<script src="CountryPoints.js" type="text/javascript"></script>
<script src="moviessimple.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<div>
<select name="country" id="country" class="form-control input-lg">
<option value="">Select country</option>
</select>
<br /><br />
<select name="Year" id="Year" class="form-control input-lg">
<option value="">Select year</option>
</select>
<br /><br />
<select name="title" id="title" class="form-control input-lg">
<option value="">Select movies</option>
</select>
</div>
</div>
<script>
$(document).ready(function(){
load_json_data('country');
function load_json_data(country, Year)
{
var html_code = '';
$.getJSON('moviessimple.js', function(data){
html_code += '<option value="">Select '+country+'</option>';
$.each(data, function(key, value){
if(country == 'country')
{
if(value.Year == '')
{
html_code += '<option value="'+value.country+'">'+value.title+'</option>';
}
}
else
{
if(value.Year == Year)
{
html_code += '<option value="'+value.country+'">'+value.title+'</option>';
}
}
});
$('#'+country).html(html_code);
});
}
$(document).on('change', '#country', function(){
var country_id = $(this).val();
if(country_id != '')
{
load_json_data('Year', country_id);
}
else
{
$('#Year').html('<option value="">Select year</option>');
$('#title').html('<option value="">Select movies</option>');
}
});
$(document).on('change', '#Year', function(){
var Year_id = $(this).val();
if(Year_id != '')
{
load_json_data('title', Year_id);
}
else
{
$('#title').html('<option value="">Select movies</option>');
}
});
});
</script>
</body>
</html>
you only need to get the data from server once, save it to global variable then update the dropdown from other function
var movieData = [];
var html_code = '';
load_json_data('country');
function load_json_data(country, Year) {
/*
// to apply in your page
$.getJSON('moviessimple.js', function (data) {
movieData = data;
$.each(movieData, function (index, value) {
html_code +=
'<option value="' + value.country + '">' + value.country + '</option>';
});
});
// and remove lines block below
*/
movieData = [
{
term: '2020W',
Year: 2018,
link: 'https://www.imdb.com/title/tt6342440',
title: 'Funan',
country: 'France',
},
{
term: '2020W',
Year: 2017,
link: 'https://www.imdb.com/title/tt6516966',
title: 'And Then They Came for Us',
country: 'United States',
},
{
term: '2020W',
Year: 2019,
link: 'https://www.imdb.com/title/tt6751668',
title: 'Parasite',
country: 'South Korea',
},
];
$.each(movieData, function (index, value) {
html_code +=
'<option value="' + value.country + '">' + value.country + '</option>';
});
$('#country').append(html_code);
}
function updateDropdown(country, year, title) {
if (!year) {
html_code = '<option value="">Select year</option>';
$.each(movieData, function (index, value) {
if (value.country == country) {
html_code +=
'<option value="' + value.Year + '">' + value.Year + '</option>';
}
});
// update year dropdown
$('#Year').html(html_code);
$('#title').html('<option value="">Select movies</option>');
} else {
html_code = '<option value="">Select movies</option>';
$.each(movieData, function (index, value) {
if (value.country == country) {
html_code +=
'<option value="' + value.title + '">' + value.title + '</option>';
}
});
// update year dropdown
$('#title').html(html_code);
}
}
$('#country, #Year, #title').on('change', function () {
if (this.id == 'country') {
// reset year and title
$('#Year').prop('selectedIndex', 0);
$('#title').prop('selectedIndex', 0);
}
if (this.id == 'title') {
console.log('The title is: ' + $(this).val());
} else {
var country = $('#country').val();
var year = $('#Year').val();
var title = $('#title').val();
updateDropdown(country, year, title);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div>
<select name="country" id="country" class="form-control input-lg">
<option value="">Select country</option>
</select>
<br /><br />
<select name="Year" id="Year" class="form-control input-lg">
<option value="">Select year</option>
</select>
<br /><br />
<select name="title" id="title" class="form-control input-lg">
<option value="">Select movies</option>
</select>
</div>
</div>
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());
});
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>');
}
});
This script produce a drop down form where I can select the number of drop down fields that can be displayed. However I'm kind of stuck on that. My problem now is how to make default text field base on the value of the second drop down form? For example if I select 'Ms.' It will produce Two text field else it will just one text field.
jQuery
$(document).ready(function() {
$('#bookinfo_adult').change(function() {
var num = $('#bookinfo_adult').val();
var i = 0;
var html = '';
for (i = 1; i <= num; i++) {
html += '<br>' + i + '. <select name="gender4-' + i + '">' + '</' + 'option>' + '<option value=' + '"m">Mr. ' + '</option' + '>' + '<option value=' + '"f">' + 'Ms. ' + '</option' + '>' + '</select' + '></br>';
}
$('#list').html(html);
});
});
HTML
<select id="bookinfo_adult" name="bookinfo_adult">
<option value="0">- 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>
<option value="6">6</option>
</select>
<div id="list"></div>
Not quite sure what you're asking, but I guess you want to display input fields dynamically based on the current selection in your generated select elements?
So how about this?
HTML:
<input type="text" id="bookinfo_adult">
<div id="list"></div>
CSS:
#list input { display: none; }
JS:
$(document).ready(function() {
$('#bookinfo_adult').change(function() {
var num = $('#bookinfo_adult').val(), i = 0, html = '';
for (i = 1; i <= num; i++) {
html += '<div>' + i + '. \
<select name="gender4-'+i+'"><option/><option value="m">Mr.</option><option value="f">Ms.</option><select> \
<input type="text" class="ms"> <input type="text" class="mr">\
</div>';
}
$('#list').html(html);
});
$(document).on("change", "#list select", function(){
var parent = $(this).closest("div");
switch ($(this).val()) {
case "m": parent.find(".mr").show(); parent.find(".ms").hide(); break;
case "f": parent.find("input").show(); break;
default: parent.find("input").hide(); break;
}
});
});
I just added two text fields (hidden with CSS at first) and wrapped every "line" of your dropdown in a div for easier selection. Then a onchange handler is created that works for all elements being added to the DOM in the future (once you could use jQuery.live() for that, but it's deprecated as of version 1.7). The handler itself should be self-explanatory. ;)
Working example: http://jsfiddle.net/DfXEE/