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/
Related
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>
The following is a selection element:
<html>
<head>
<title> </title>
</head>
<body>
<select class = 'form-control'>
<option>Select an Option:</option>
<option>Electrical</option>
<option>Mechanical</option>
<option>Structural</option>
<option>Others</option>
</select>
</body>
</html>
My desired result is that: when I click an option in the select tag, a table would pop-up. How can I do that?
I am using Chosen dropdown and populating the option dynamically. search in the dropdown is not working even i cant enter the text but it is working fine when dropdown options are static. Please help.
<select id="test" class="chosen-select">
<option>Select1</option>
</select>
var div2=[];
div2.push("<option value='1'>ALL1</option>");
div2.push("<option value='2'>ALL2</option>");
div2.push("<option value='3'>ALL3</option>");
div2.push("<option value='4'>ALL4</option>");
div2.push("<option value='5'>ALL5</option>");
$("#test").html(div2.join(''));
$("#test").trigger("chosen:updated");
Make sure to call .chosen() after you've dynamically populated the dropdown.
Here is a fiddle https://jsfiddle.net/npzs2bt7/
EDIT 1 :
Probably you didn't call chosen() on the dropdown before you could call trigger("chosen:updated").
Updated fiddle https://jsfiddle.net/npzs2bt7/1/
EDIT 2 :
Using Jquery 1.9.0, Chosen.Jquery 1.1.0
Copy this into an html file (chosentest.html) and try it.
<html>
<head>
<title>chosen demo</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
<style type="text/css">
#test
{
width:100px;
}
</style>
</head>
<body>
<select id="test" class="chosen-select">
<option>Select1</option>
</select>
<button class="btn">Click to see selected value</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//first call chosen()
$("#test").chosen();
var div2=[];
div2.push("<option value='1'>ALL1</option>");
div2.push("<option value='2'>ALL2</option>");
div2.push("<option value='3'>ALL3</option>");
div2.push("<option value='4'>ALL4</option>");
div2.push("<option value='5'>ALL5</option>");
$("#test").html(div2.join(''));
//this will bind the updates
$("#test").trigger("chosen:updated");
//text button to alert selected value from dropdown
$(".btn").click(function(){
alert($("#test").val());
});
});
</script>
</body>
</html>
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.
I'm trying to create a range of numbers in a dropdown form using JavaScript.
However, it looks like
…and it does not show any options and clicking on the arrow does not pop up more options. I already checked that my path is correct.
I tried it in JSFiddle and it works but not when I put it in my HTML.
I'm going crazy on why this is not working.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../stylesheets/main.css">
<script type="text/javascript" src="../assets/main.js"></script>
</head>
<body id="gradient">
<div id="down" class="center">
<p >Word Size</p>
<select id="length">
</select>
</div>
</body>
</html>
main.js
var select = document.getElementById('length');
for (var i = 0; i<= 24; i++){
var option = document.createElement('option');
option.value = i;
option.innerHTML = i;
select.options.add(option);
}
The problem is that when main.js script is parsed and executed, there is no element with id length yet in DOM. The simplest solution is to move your script to the very end of body tag:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../stylesheets/main.css">
</head>
<body id="gradient">
<div id="down" class="center">
<p >Word Size</p>
<select id="length"></select>
</div>
<script type="text/javascript" src="../assets/main.js"></script>
</body>
</html>
The reason why it works in jsFiddle, is because it's configured so that script section is executed on window.onload event (in the right side-panel, dropdown "onLoad"). Of course, you could do the same, e.g. in main.js:
window.onload = function() { /* previous main.js code */};
In this case you would not need to move script anywhere.