Dynamically adding checkboxes to multiselect dropdown - javascript

I have been stuck on this problem for hours and I am going mad ! I need a dropdown of checkboxes - which I populate dynamically into a select tag. I also need to append each multiselect dropdown that I deep-clone with jquery to a number of <div> elements. However, every time I do this the cloned element is rendered as a list of multiselectable items (and not as a dropdown and loses all its styling). This is the multiselect container that I would like to add my checkboxes to:
<select class="multiselect1" multiple="multiple">
</select>
I finally initialize each cloned dropdown by calling .multiselect(); The library I am using for this is: http://davidstutz.github.io/bootstrap-multiselect/
$('.multiselect1').multiselect();
var filterClone = $('.multiselect1').clone(true);
//filterClone.multiselect();
$('body').append(filterClone[0]);
When the above lines execute, the select element is indeed present in the body but is invisible. When I remove the style attribute the element becomes visible but is rendered as a list of multiselectable items (which is expected). But why is the cloned multiselectable dropdown not displayed at all in the first place ?
Any suggestions that could lead me to a solution (or the solutions itself!) using javascript or jquery would be most appreciated.

Well to make this work you need JQuery. Did you include JQuery? If you didn't you can use this: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> Did you upload all the files to your server?
Try this code on your website. Does it work?
HTML:
<select id="SOExample" multiple="multiple">
<option value="Love it!">Love it!</option>
<option value="Hate it!">Hate it!</option>
<option value="I don't know...">I don't know...</option>
</select>
JS:
<script type="text/javascript">
$(document).ready(function() {
$('#SOExample').multiselect();
});
</script>

Related

How to display different images with jQuery when an option is selected

How to display different images when an option is selected?
Here is my markup:
<select name="brand-range">
<option value="Brand1">BFS</option>
<option value="Brand2">FS</option>
<option value="Brand3">PS</option>
</select>
<div class="option-image" id="thumbs">
<div id="bfs"><img src="images/hotel0.jpg"/></div>
<div id="fs"><img src="images/hotel1.jpg" /></div>
<div id="ps"><img src="images/hotel2.jpg" /></div>
</div>
I'm looking for a jQuery solution.
Any suggestions highly appreciated!
Based on your HTML code, i've written script, since option text and image div id value is same i've written script based on that. Refer and the code do changes accordingly.
Here on change of dropdown, i'm getting options values and since images parent div's value are id are same i'm getting that element and changing its css.
Note: you have to change your HTML structure so that you can make changes through jquery accordingly.
$("#brandrange").bind("change", function() {
var image_element = ($("option:selected").text()).toLowerCase();
$("#thumbs").find("div").css("display", "none");
$("#thumbs").find("#" + image_element).css("display", "block");
});
Here is JSfiddle link https://jsfiddle.net/90sybgyw/1/

cannot invoke bootstrap plugin from javaScript

I am trying to invoke bootstrap plugin for my webpage.
This is the plugin I am talking about:
Select Picker
Select Picker 2
When I invoke the plugin from my html file like this:
<html>
<head></head>
<body>
<select class="selectpicker show-tick" id="tag" ata-style="btn-primary">
<option>stocks</option>
<option>bank</option>
<option>card</option>
</select>
<script type="text/javascript">
$(window).on('load', function () {
$('.selectpicker').selectpicker('hide');
});
</script>
</body>
</html>
The output is fine; the select boxes come with all CSS loaded as showed in the links above.
However, when I create the boxes dynamically from a JS file, the select boxes come up as plain Select boxes with no effects.
var selectElement1_act = document.createElement("select");
selectElement1_act.setAttribute("class", "selectpicker");
Any help would be appreciated.
This is because you're invoking the function on the window load event, and when elements are created dynamically, they do not necessarily exist in the DOM at that point.
Since you're using jQuery, you'd be better to utilise the following code in your JS file instead:
$(function() {
var selectPicker = $('<select class="selectpicker" />');
selectPicker.appendTo('body');
selectPicker.selectpicker('hide');
});

How to load a text file using JavaScript with a HTML combobox (<select>)?

First of all, thanks for reading the topic.
Now, I'm making a website using HTML5 and I need to load a text file according to the user choice in a combobox. I mean, the user selects an option from the combobox and the text from it should shown on a specific cell of a table. The number of times that the user wants without refreshing the site.
The problem is that the code is not working. The code:
The HTML for the combo box:
<select id = "comboSelect">
<option value="text1.txt">text1</option>
<option value="text2.txt">text2</option>
<option value="text3.txt">text3</option>
<option value="text4.txt">text4</option>
<option value="text5.txt">text5</option>
</select>
The HTML for the table cell:
<td colspan="5" class="text" id = "cuadroTexto"></td>
The JavaScript that does the rest of the work:
$(document).ready(function(){
document.getElementById("comboSelect").addEventListener('change',function () {
$(document.getElementById("cuadroTexto")).load(value);
alert("Cargado");
},false);
});
Edit 1:
I think that the JavaScript is not recognizing the change event from the combobox.
I'm yet not working with a server.
Check this is working
CODE
$(document).ready(function(){
$("#comboSelect").change(function () {
$("#cuadroTexto").load(this.value);
alert($(this).val())
});
});
Fiddle http://jsfiddle.net/krunalp1993/Qr6GK/

Dynamic Dropdown menu through php

I visited a website a few weeks ago and came across a dynamic drop down menu. I came across a functionality that I am now trying to replicate but do not know how. In the dropdown you picked the desired number of cars and then it reiterated input fields according to the number of cars chosen. I believe this was done through javascript and a loop was involved. Is there a term for this action or way to display things? Also an example of how to accomplish something similar would help?
This is done using java script ,
and here a hint
create a div and put inputs that you want inside it
<div id='controls'>
<input type="text" name="car_name" />
</div>
and using jQuery change event you can iterate view of controls div
i.e if you have a div with id container , where you will place new controls
$('select').change(function(){
var number = parseInt ($(this).val ());
//And do for loop here
for (var i=1;i<=number;i++){
$('#controls').clone().appendTo($('#container');
}
});
Please enhance this code to fit your requirement.
It's unlikely that this would be done with PHP, since that would require a page refresh.
It's more likely that it would be done with Javascript listening for the onChange event of the Select element (the drop down menu). When the event is detected, Javascript could show / hide div elements (one for each Car), or dynamically create / destroy them.
If you want it without refresh, you need use javascript, i have made one example here using jquery:
HTML CODE
<label>How many cars?</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="fields"></div>
JAVASCRIPT CODE
$('select').change(function() {
var option = $(this).val();
showFields(option);
return false;
});
function showFields(option){
var content = '';
for (var i = 1; i <= option; i++){
content += '<div id="field_'+i+'"><label>Car '+i+'</label><br /><label>Model:</label> <input id="model_'+i+'" /><br /><label>Maker:</label> <input id="maker_'+i+'" /><br /><label>Year:</label> <input id="year_'+i+'" /><br /><div><br />';
}
$('#fields').html(content);
}
Here the example: http://jsfiddle.net/zbzjm/1/

Hide/Display tables after selecting different options

I have 2 tables "iu" and "si" and I put a dropdown list for users to select which one they want to see. Once the option is selected, the corresponding table will appear.
Another one is supposed to be hidden but when the page is loaded, default table "si" is shown.
Here is my JavaScript code:
<script>
$(document).ready(function()
{
$('#iu_table').hide();
});
$('#iu').onchange=function()
{
$('#si_table').hide();
$('#iu_table').toggle();
}
</script>
And HTML code:
<select>
<option id="si" selected>SI</option>
<option id="iu">IU</option>
</select>
The table ID is "si_table" and "ui_table" respectively.
I used the code above but it doesn't work. No matter which one I select, only the "si" table is shown.
I hope that someone could help.
You should probably work with the Tutorials of jQuery and familarize yourself with the workings of the libraries.
There are multiple errors in your code:
There is no field onchange. What you want is the change function of jQuery, which is described here: http://api.jquery.com/change/
The code for the change function belongs into the $(document).ready function, so jquery executes it, when the document is loaded. The code has to be executed there, so that the function is called when the select is changed.
You want to work with the change of the select not with the change of the option.
In the body of your change function you hide the one table and toggle other: toggle both, so the first can be shown too, when the option is selected. Also this construct only works for exactly 2 options. If you want more options, you have to work something out like in the answer of Paritosh.
Here is a working sample:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
$(document).ready(function()
{
$('#iu_table').hide();
$('#selector').change(function()
{
$('#si_table').toggle();
$('#iu_table').toggle();
});
});
</script>
</head>
<body>
<div id="si_table">si</div>
<div id="iu_table">iu</div>
<select id="selector">
<option id="si" selected="selected">SI</option>
<option id="iu">IU</option>
</select>
</body>
There are many ways of achieving this. One is below - I have added id attribute to dropdown control
<select id="myselection">
<option id="si" selected>SI</option>
<option id="iu">IU</option>
</select>
<script>
$('#myselection').bind('change', function(){
if($('#myselection option:selected').attr('id') == "si"){
$('#si_table').show();
$('#iu_table').hide();
}
else if($('#myselection option:selected').attr('id') == "iu"){
$('#si_table').hide();
$('#iu_table').show();
}
});
</script>
There is a method in jQuery which does hide/show matched elements called toggle()
As you need to hide the IU table at first, you may need some css trick for that. So put display:none; for the IU table and do toggle on changing the dropdown values. Working fiddle is here

Categories

Resources