In my website, I am using the DDSlick plugin for styling my select dropdown. It is nice. But I can't change the selected value using javascript.
For example, if the current selected value is "INDIA", then I want to change "INDIA" to "USA" by using javascript, without refreshing the page. Is there any way to do this?
Thanks in advance.
If you want force a specific selected items on click on buttons you culd use this code.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ddslick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#dropdown').ddslick({
width: 300,
selectText: "Select an item",
onSelected: function (data) {
console.log(data)
}
});
$('#button').on('click', function () {
$('#dropdown').ddslick('select', {index: 2 });
});
})
</script>
</head>
<body>
<select id="dropdown">
<option>select</option>
<option id="a" value="">INDIA</option>
<option id="b" value="">USA</option>
<option id="c" value="">AFRICA</option>
</select>
<input name="" type="button" value="change" id="button">
</body>
</html>
with similar code you can create a button to browse through all the options in the list
fiddle
If this solution does not suit your needs, i apologize for making you lose time.
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>
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>
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/
I want to add a form with javascript and want to use this code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="afbeelding1" class="afbeelding">
<form>
<input type="checkbox" onclick="addOrRemoveSpecifications()">
</form>
<img src="afbeelding1.jpg">
</div>
</body>
<script>
function addOrRemoveSpecifications(){
var div = document.getElementById("afbeelding1").firstchild;
div.innerHTML=div.innerHTML +
'
<form>
<select>
<option value="320x200">320x200
<option value="1024x768">1024x768
<option value="1920x1200">1920x1200
</select>
<select>
<option value="Canvas">Canvas
<option value="Hout">Hout
<option value="Digitaal">Digitaal
</select>
</form>
';
}
</script>
</html>
can anybody help me with this?
thank you in advance, you guys are awesome :)
simply use jquery or equivalent
myform = '<form ...';
$('afbeelding1').append(myform);
There are two ways depending what you want.
First Method
1.Add the form in your HTML itself where you want it.
2.Set the css :display of that form as none.
3.Use the JavaScript function to change the display from none to block.
function addOrRemoveSpecifications() { documentgetElementById("form").style.display="block"; }
Second Method:
Use the following to create your form :-
1.createElement
2.appendChild
.
For Example:http://jsfiddle.net/rvs4oq6p/
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.