I want to display two different values from json in two different dropdowns in html but its not displaying. I am currently using the following code :
How to separate Name in one dropdown and Age in the other dropdown in js.
Here is my json data :
{
"action": [
{"name":"Ankit","age":"23"},
{"name":"Ankit2","age":"23"}
]
}
$(document).ready( function(){
$.getJSON("jsondata.json",function(data){
$.each(data.action,function(){
$("select").append("<option>Name: "+this['name']+"</option><option>Age: "+this['age']+"</option><br/>");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<title>
</title>
</head>
<body>
<select>
</select>
<select>
</select>
<script type="text/javascript" src="script/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="script/myscript.js"></script>
</body>
</html>
Added id attribute to both selects to be able to select with jQuery easily.
I also added your sample json data to http://jsbin.com/pegabe/1.json.
$.each(data.action, function() {
nameDropdown.append($("<option></option>")
.text('Name:' + this['name']));
ageDropdown.append($("<option></option>")
.text('Age:' + this['age']));
});
nameDropdown is the reference to <select id="name"></select>
$('<option></option>') - creates a <option></option>
.text('Name:' + this['name']) - appends text to the option like this <option>Name: + this['name']</option>
finally this option is appended to nameDropdown.
Hope this helps.
$(document).ready(function() {
$.getJSON("http://jsbin.com/pegabe/1.json", function(data) {
var nameDropdown = $("#name"); // dropdown for name
var ageDropdown = $("#age"); // dropdown for age
$.each(data.action, function() {
nameDropdown.append($("<option></option>")
.text('Name:' + this['name']));
ageDropdown.append($("<option></option>")
.text('Age:' + this['age']));
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<title>
</title>
</head>
<body>
<select id="name">
</select>
<select id="age">
</select>
<script type="text/javascript" src="script/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="script/myscript.js"></script>
</body>
</html>
Change your HTML slightly, Add ID to select element
<select id="name">
</select>
<select id="age">
</select>
Script
$.getJSON("jsondata.json", function(data) {
$.each(data.action, function(index, elem) {
//Append option to name
$("#name").append($("<option />", {
value: elem.name,
text: "Name: " + elem.name
}));
//Append age
$("#age").append($("<option />", {
value: elem.age,
text: "Age: " + elem.age
}));
});
});
Note: Also use only single version of jQuery.
Related
I have a text file that looks like this:
fruit,size,color
I want to be able to load the text file and create a dynamic select drop down list from it.
This is my code for now, it is not working. it is not printing anything in the browser console, also nothing is in the select drop downn list. Could some one advise what I did wrong?
Below is the code, I use handle bar to render the page to users.
<!DOCTYPE html>
<html>
<head>
<form method="post" action="index/display" id = "first" name="first">
<title>AUTOSELECTEST</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$.get(js/pytxt.txt",
function(data) {
alert( "Data Loaded: " );
console.log('start processing text')
console.log(data); /* Open the console too see the data */
var options = data.split(','),
/* Something to "explode" by. See link. */
$select = $('select#value');
for (var i = 0; i < options.length; i++) {
$select.append('<option value="' + i + '">' + options[i] + '</option>"');
console.log ($select)
});
</script>
</head>
<body>
<div id="page-wrap">
<h1>Pulls from text files</h1>
<select id="value">
<option selected value="base">Please Select</option>
</select>
</div>
</body>
</html>
I have debugged the code, Please try below
<!DOCTYPE html>
<html>
<head>
<title>AUTOSELECTEST</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$.get(/public/js/pytxt.json",
function(data,error) {
if (error) {
console.log (error);
}
alert( "Data Loaded: " );
console.log('start processing text')
console.log(data); /* Open the console too see the data */
var options = JSON.parse(data);
/* Something to "explode" by. See link. */
for (i in options) {
$("#value").append('<option value="' + options[i] + '">' + i + '</option>');
}
});
</script>
</head>
<body>
<div id="page-wrap">
<h1>Pulls from text files</h1>
<select id="value">
<option selected value="base">Please Select</option>
</select>
</div>
</body>
</html>
I am trying to place a select menu into a modal and have a strange issue in that the select menu is loaded with display:none so it is hidden is that normal behaviour with materialize?
The name field above the select only shows the first entry from the select unless I remove the display:none in the inspector which then allows me to choose any value from my select with it repeating that value above.
What am I doing wrong?
this is the div I am adding the select into
<div class="input-field col s12">
<select class="custName">
</select>
<label>Select Customer</label>
</div>
I am calling this at the end of my html page
<script>$(document).ready(function(){
$('select').formSelect();
});</script>
creating my selects options here
const custData = (data) => {
if (data.length) {
let html = '';
data.forEach(doc => {
const cust = doc.data();
//console.log(cust);
const select = `
<select>
<option value=${cust.customerId}>${cust.name}, ${cust.address.postCode}</option>
</select>
`;
html += select;
});
customerList.innerHTML = html;
} else {
customerList.innerHTML = '<ul class="center-align">no data</ul>'
}
};
Please put me out of my misery
The issue is that, your $('select').formSelect(); is being executed before you are populating your option tags.
The Solution:
Make the intialization call after your option tag population code.
Note: don't enclose every option tag with a select tag in your custData() function
For example, this one executes initialization statement before population :
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="input-field col s12">
<select id="s_1" class="custName">
</select>
<label>Select Customer</label>
</div>
<script type="text/javascript">
var select = document.getElementById("s_1");
var options = "<select><option value = 1>1</option></select><select><option value = 2>2</option></select><select><option value = 3>3</option></select>";
setTimeout(function(){ select.innerHTML = options; }, 1000);
$(document).ready(function() {
$('select').formSelect();
});
</script>
</body>
</html>
This one Executes initialization after population:
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="input-field col s12">
<select id="s_1" class="custName">
</select>
<label>Select Customer</label>
</div>
<script type="text/javascript">
var select = document.getElementById("s_1");
var options = "<select><option value = 1>1</option></select><select><option value = 2>2</option></select><select><option value = 3>3</option></select>";
setTimeout(function(){ select.innerHTML = options; $('select').formSelect();}, 3000);
$(document).ready(function() {
$('select').formSelect();
});
</script>
</body>
</html>
You have to intialize formSelect() on select after your modal is open so it will work. Replace modal_id with your modal id attribute.
$('#modal_id').on('shown.bs.modal', function (e) {
$('select').formSelect();
});
I am trying to use select2 in my project.
In the following screenshot, I want to duplicate the social media section (include select2, input and remove btn) dynamically after a user clicks on the ADD More button:
To avoid conflict, I am calling destroy event for all select2 at the beginning of the click event. Then, I will duplicate the elements. Then, I will re-initialize select2. But, it will always just convert one select to select2.
In the following screenshot, you can see duplicated selects are not converted to select2:
The following snippet code shows the problem:
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<button onclick="duplicate_select();">duplicate</button>
<br/><br/>
<select class="selection" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
<script>
$(document).ready(function() {
$('.selection').select2();
});
function duplicate_select ()
{
//Destroy all active select2
$(".selection").each(function (index, value) {
var temp_selecte2 = $(value).select2();
temp_selecte2.select2('destroy');
});
//Get First Select Node that I want to duplicate
var first_node = $('.selection').first().prop('outerHTML');
//Add new node to the body
$('body').append(first_node);
//Re-initialize all select2
$(".selection").each(function (index, value) {
var temp = $(value).select2();
//temp.select2();
});
//Following codes is not working too
//$(".selection").select2();
}
</script>
</body>
</html>
Can you please guide me how I can solve this problem and Re-initialize all duplicated select elements?
The issue occurs because Select2 requires the select tag to be unique, the select2() method identifies this by using an attribute called data-select2-id, the only thing you need to do is modify that attribute.
Your problem can be fixed by either removing the attribute or setting a unique one. To set unique one just add the line temp.attr('data-select2-id', new Date().getTime()), but the recommended way is to remove it temp.removeAttr('data-select2-id')
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<button onclick="duplicate_select();">duplicate</button>
<br/><br/>
<select class="selection" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
<script>
$(document).ready(function() {
$('.selection').select2();
});
function duplicate_select ()
{
//Destroy all active select2
$(".selection").each(function (index, value) {
var temp_selecte2 = $(value).select2();
temp_selecte2.select2('destroy');
});
//Get First Select Node that I want to duplicate
var first_node = $('.selection').first().prop('outerHTML');
//Add new node to the body
$('body').append(first_node);
//Re-initialize all select2
$(".selection").each(function (index, value) {
var temp = $(value);
temp.removeAttr('data-select2-id');
// temp.attr('data-select2-id', new Date().getTime()); // <-- this works too
temp.select2();
});
}
</script>
</body>
</html>
I have 2 select boxes with ids dd1,dd2. While selecting a value from select box 1 the value in seelct box 2 should be replaced in jquery. The following is not worked. What mistake I am doing here?
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script src="jquery-1.12.0.min.js"></script>
<head>
<script>
function change(){
alert("Hi");
$('dd2').children().remove().end().append('<option selected value="5">5</option>') ;
}
</script>
</head>
<body>
<select id="dd1" onchange=change()>
<option>1<option>
<option>2<option>
<option>3<option>
<option>4<option>
</select>
<select id="dd2">
<option>A<option>
<option>B<option>
<option>C<option>
<option>D<option>
</select>
</body>
</html>
You need to add # in your Jquery selector for an ID: $('#dd2')...
Here is a working fiddle: https://jsfiddle.net/p5g3p0t5/
As the title says, I'm trying to add an option to a dropdown and have it displayed in the list.
Here's a sample example (I maybe old but this is my first stab at the world of web)
When you press the add button a new option should appear in the list "Pasta", but it is not being displayed. If you "select all" and press the "Products" button the alert displays "Pasta".
I've spent over a week looking for a solution and I am here out of desperation!
<!DOCTYPE html>
<html>
<head>
<title>Simple List Example</title>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#productsList").multiselect({
includeSelectAllOption: true
});
$("#selectedButton").click (function() {
var selected = $("#productsList option:selected");
var message = "Products:\n";
selected.each(function () {
message += " " + $(this).text() + " " + $(this).val() + "\n";
});
alert(message);
});
$('#addButton').click(function(){
$("#productsList").append(new Option("Pasta", "6"));
});
});
</script>
</head>
<body>
<select id="productsList" multiple="multiple">
<option value="1">Cereal</option>
<option value="2">Soft Drinks</option>
<option value="3">Staples</option>
<option value="4">Salad Dressing</option>
<option value="5">Ice Cream</option>
</select>
<input type="button" id="selectedButton" value="Products"/>
<input type="button" id="addButton" value="Add"/>
</body>
</html>
Please feel free to reduce the problem (but not too much) and please don't get too esoteric.
Thanks in advance
Since you're using bootstrap multi-select , everytime you add a new option element you need to "rebuild" the element. You can check that method on the documentation right here: http://davidstutz.github.io/bootstrap-multiselect/#methods
So the code would be something like this:
$('#addButton').click(function(){
$("#productsList").append(new Option("Pasta", "6"));
$('#productsList').multiselect('rebuild');
});
The problem is that when you initialise your multiselect, it appends a hidden DOM element class="multiselect-container dropdown-menu" to your productlist.
This new element is responsible for displaying items in your list.
You need to rebuild your multiselect after adding the new option.
$('#addButton').click(function(){
$("#productsList").append(new Option("Pasta", "6")).multiselect("rebuild");
});
I would highly recommend using Firebug or Chrome's dev tools to view your DOM.