I'm trying to make a dynamic dropdown selection using this theme with Javascript. The <option> elements are taken from an array in a text file using AJAX and inserted in the <select> dropdown:
<head>
<script src="jquery-2.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
<link rel="stylesheet" type="text/css" href="css/cs-skin-border.css" />
</head>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "http://localhost/array.txt",
beforeSend: function(xhr) {
xhr.overrideMimeType("text/plain; charset=x-user-defined");
}
})
.done(function(data) {
var myArray = JSON.parse(data);
var output = [];
$.each(myArray, function(key, value)
{
output.push('<option value="' + value + '">'+ value +'</option>');
});
$('#myselect').html(output.join(''));
});
</script>
And here's the HTML part:
<body>
<form id="myform" action="select.php">
<input id="myinput" name="owncategory" type="text"> <br><br>
<div>
<select class="cs-select cs-skin-border" id="myselect">
<option value="" disabled selected>Select a category</option>
</select>
</div>
<div><input id="mysubmit" type="submit" value="Submit"></div>
</form>
<script src="js/classie.js"></script>
<script src="js/selectFx.js"></script>
<script>
(function() {
new SelectFx($(".cs-select").get(0));
})();
</script>
</body>
The problem is, the dropdown selection (which is now stylized by the script) doesn't show the added <option> elements, even though when the page is inspected on a browser, they're there. I don't know how to show them as part of the stylized dropdown. Any ideas?
EDIT: I just figured it out, kind of. So instead of inserting it on the select element with the #myselect id:
$('#myselect').html(output.join(''));
I inserted it on a <div> element that shows up when the page loads:
$('.cs-options').html(output.join(''));
And now I get this: http://i.imgur.com/KMEurVP.png
But now my current problem is that they're un-selectable.
Work for me.
<li data-option="" data-value="therock" class=""><span>The rock</span></li>
Related
I need to highlight both cars and vans, the below function will highlight for non multiple select2 list, I need to highlight multiple and non multiple selects.
<!DOCTYPE html>
<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<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>
<select name="cars" id="cars" multiple>
<option value="volvo">Cars</option>
</select>
<select name="vans" id="vans">
<option value="volvo">Vans</option>
</select>
<script>
function highlightSelect2(type, selector) {
$(type+'select2-'+ selector +'-container').effect("highlight", {
color: '#f88'
}, 10000);
}
$(document).ready(function() {
$('#cars').select2();
$('#vans').select2();
highlightSelect2("#","cars")
highlightSelect2("#","vans")
});
</script>
</body>
</html>
You can define the actual select2 classes which will be always same in the library and never changes.
Firstly, check if the select2 is multiple or not. And call your highlightSelect2 function accordingly by passing true for multiple select highlight else and for normal __rendered select2 options.
Add a class to your html selects and check if they have prop of multiple and call select2 for highlighting that html select.
Working Demo:
function highlightSelect2(isMultiple = null) {
//is multiple
var isWhat = isMultiple ? '--multiple' : '__rendered'
//highlight
$('.select2-selection' + isWhat).effect("highlight", {
color: '#f88'
}, 10000);
}
$(document).ready(function() {
//initilize select2
$('.mySelect').select2();
//check each and highlight
$('.mySelect').each(function(index, element) {
//check if its muliple
let prop = $(element).prop('multiple')
//call functions
prop ? highlightSelect2(prop) : highlightSelect2()
})
});
<!DOCTYPE html>
<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<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>
<select name="cars" class="mySelect" id="cars" multiple>
<option value="volvo">Cars</option>
</select>
<select name="vans" class="mySelect" id="vans">
<option value="volvo">Vans</option>
</select>
</body>
</html>
I need to highlight only the #vans and not the #cars
Sometimes #vans can be multiple and sometimes it can be a non multiple too. However I must be able to specifically pass the ID selector to highlight the select. Here is the code below from Highlight a select2 using highlight method and using css selector answer
<!DOCTYPE html>
<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<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>
<select name="cars" class="mySelect" id="cars" multiple>
<option value="volvo">Cars</option>
</select>
<select name="vans" class="mySelect" id="vans">
<option value="volvo">Vans</option>
</select>
<script>
function highlightSelect2(selector, isMultiple) {
var isWhat = isMultiple ? '--multiple' : '__rendered'
$('.select2-selection' + isWhat).effect("highlight", {
color: '#f88'
}, 10000);
}
$(document).ready(function() {
//initilize select2
$('.mySelect').select2();
$('.mySelect').each(function(index, element) {
let prop = $(element).prop('multiple')
prop ? highlightSelect2("#vans",prop) : highlightSelect2("#vans")
})
});
</script>
</body>
</html>
If you know that only the select#vans needs highlighting, you don't need to iterate over all Select2 jQuery items. Additionally, your highlightSelect2 isn't using the selector you've passed in.
Using your code sample, I've modified it so that only the #vans element will be highlighted by:
not iterating over all select2 elements (using .each)
This lets you only highlight the #vans, directly
Modifying highlightSelect2 to use the passed-in selector
Removing isMultiple logic — it wasn't necessary
<!DOCTYPE html>
<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<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>
<select name="cars" class="mySelect" id="cars" multiple>
<option value="volvo">Cars</option>
</select>
<select name="vans" class="mySelect" id="vans">
<option value="volvo">Vans</option>
</select>
<script>
function highlightSelect2(selector) {
$(selector)
.next('.select2-container')
.find(".select2-selection")
.effect("highlight", {
color: '#f88'
}, 10000);
}
$(document).ready(function() {
//initilize select2
$('.mySelect').select2( { width: "25%" });
// highlight the #vans select2
highlightSelect2("#vans");
});
</script>
</body>
Run the code snippet and you'll see it works as you expect for your specific example.
For some reason I am not able to get Selectize.js working on my project at all. I have checked all the jQuery links and they seem to be fine, but when I view the page all I get is a simple HTML drop down menu. I can't type directly into the box and there is no option to auto complete or add a new entry as at http://selectize.github.io/selectize.js/ (Single Item Select sub heading)
I have tried to copy the simplest example from the Selectize site but even that doesn't work. I can get a simple 'alert' pop up box to work so I know that jQuery is working. The file address selectize/selectize.min.js is also correct.
I would appreciate any help.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700">
<link rel="stylesheet" href="selectize/normalize.css">
<link rel="stylesheet" href="selectize/styles.css">
<link rel="stylesheet" href="selectize/default.css" data-theme="default">
<!--[if IE 8]><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.0.8/es5-shim.min.js"></script><![endif]-->
<script type="text/javascript" src="selectize/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="selectize/selectize.min.js"></script>
<script type="text/javascript" src="selectize/myjquery.js"></script>
</head>
<body>
<section class="demo" id="demo-single-item-select">
<div class="header">
Single Item Select
</div>
<div class="sandbox">
<label for="select-beast">Beast:</label>
<select id="select-beast" class="demo-default" placeholder="Select a person...">
<option value="">Select a person...</option>
<option value="1">Chuck Testa</option>
<option value="4">Sage Cattabriga-Alosa</option>
<option value="3">Nikola Tesla</option>
</select>
</div>
<div class="description">
The most vanilla of examples.
</div>
</section>
</body>
</html>
myjQuery:
$(document).ready(function() {
//alert('Ahoy hoy');
$('#select-beast').selectize({
create: true,
sortField: 'text',
searchField: 'item',
create: function(input) {
return {
value: input,
text: input
}
}
});
});
<option value="">Select a person...</option>
remove value attribute or give it any name
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 want to change my data-subtext attribute of the options of my select element in runtime. But data-subtext does not get updated in selectpicker.
Here's my code:
$('.selectpicker').attr("data-subtext","new subtext").selectpicker('refresh');
That's because .selectpicker class stands for the select element itself not for it's options. Considering it can have more than one option you need to state which option's data-subtext you wish to change. refer to the following snippet:
$(document).ready(function() {
$('#myBtn').click(function() {
$(".selectpicker > option:eq(1)").data("subtext", "Look I'm changed");
$(".selectpicker").selectpicker('refresh');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/css/bootstrap-select.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/js/bootstrap-select.min.js"></script>
<select class="selectpicker">
<option data-subtext="Mustard subtext">Mustard</option>
<option data-subtext="Ketchup subtext">Ketchup</option>
<option data-subtext="Relish subtext">Relish</option>
</select>
<a class="btn btn-default" id="myBtn">Update second options data-subtext</a>