Using a jQuery Plugin (Link to Plugin Code) I try to achieve a multi-select drop-down menu. Then I want to dynamically (depending on user input) change the menu-entries. The first part works fine, but changing menu-entries doesn't so far. Therefor I wanted to ask for help.
Here is the HTML part:
<select id="Fruits" name="Fruits" multiple="" style="display: none;">
<option value="1">Number1</option>
<option value="2">Number2</option>
<option value="3">Number3</option>
</select>
Then I use that code to initialise the menu:
$(function(){
$('#Fruits').multiSelect({'noneText':'Select Fruits'});
});
The result is precisely what I want:
Next I try to dynamically add a menu-entry. I do that by the following code:
var option = document.createElement("option");
option.text = "Number4";
option.value = "4";
var select = document.getElementById("Fruits");
select.appendChild(option);
This is what I hope to achieve:
However the result looks precisely like the first picture. Also running
$(function(){
$('#Fruits').multiSelect({'noneText':'Select Fruits'});
});
again doesn't help.
Get the MultiSelect instance (.data("plugin_multiSelect")) from the <select> and call .updateMenuItems() after you've added the new elements:
$("select").data("plugin_multiSelect")
.updateMenuItems();
--
The answer is based on the source code and a test on their demo page.
Related
I would like to have a tag search button in Tumblr by selection using the select option but I am not sure how to insert the onclick event using Tumblr's {text:Search Label}.
form action = "">
<select name = "Cities">
<option value="----">--Select--</option>
<option value="roma">Roma</option>
<option value="torino">Torino</option>
<option value="milan">Milan</option>
</select>
Anyone here can help? Thanks.
Well here is my code: http://jsfiddle.net/htWW6/
This is the script:
$(document).ready(function(){
$('select').bind('change',function(){
var loc = $(this).val();
location = "/tagged/" + loc;
});
});
This is jquery, so if your theme currently has this installed (many do) then that code should work off the shelf. If not then it is very easy to add jquery, but if you need a pure JS solution, I cannot help with that. Although the other answer does offer some insight.
HTML code:
<div class="controls" id="display">
<input type="text" name="demos" class="" value="1" id="displays"/>
<select class="input-medium">
<option value="">Select</option>
<option value="1">II</option>
<option value="2">AS</option>
<option value="3">AR</option>
</select>
</div>
Jquery code:
$("input[name='demos']").each(function(i,e){
var SValue = $('#displays').val();
$('option[value=' + SValue + ']').attr('selected',true);
});
I will be displaying the above html code as dynamic one for multiple times.
I will be comparing the value of #displays with the select options and make the select option as selected.
The value in #displays comes from database.
Since, am using multiple times the above html code when I pass the different values from database to that multiple code. All the multiple code shows only the first html code selected value.
However, I want all the multiple html code to show the selected value to their respective #displays.
In debug I found that $("input[name='demos']").each(function(i,e){ is not performing correctly because when i put console for Svalue it shows only the first html code input value for all the multiple html codes.
How can I fix this??
In HTML, the ID attribute is unique. You cannot use the same ID for more than one control in the same page. So, you'll need to use another approach.
I would do something like:
$("div.controls").each(function() {
$(this).children("select").eq(0).val($(this).children("input").eq(0).val());
});
EDIT: And it works, I've just made this demo!
Try this:
$("#displays").blur(function () {
var data = $(this).val();
$("#select > option").each(function () {
if (this.value == data)
$(this).attr("selected", "selected");
});
});
This example will get the input from user then the system will select the matching value.
Here is the fiddle: http://jsfiddle.net/t6kBY/
try
$("input#displays").each(function(i,e){
});
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/
This is a sample code.
If we have 100 options e.g. and User selects an Option it shows the respective Description.
I made it work with Jscript but thats too long code to mess around. and is simple thing
Here is JS Version : http://jsfiddle.net/eHwVn/
and I want to Use Simple HTML
<select>
<option value="i">ItemA</option>
<option value="i">ItemB</option>
<option value="i">ItemC</option>
<option value="i">ItemD</option>
<option value="i">ItemE</option>
<option value="i">ItemF</option>
</select>
How to add description to each item using HTMl?
TO Get this:
(Sorry I cant post Images Yet)
http://i.stack.imgur.com/DSm4j.png
Thanks for Help
Peace!
Try the following JSFiddle : http://jsfiddle.net/3XTjH/
using the HTML :
<select id="example" onchange="showtext()">
<option value="http://www.cnet.com" data_info="Click here for Cnet, the primer technology site on the net!">Cnet</option>
<option value="http://www.cnn.com" data_info="Click here for CNN, one of the best sources online to get your news.">CNN</option>
<option value="http://www.geocities.com" data_info="Click here for Geocities, and receive 10 megs of free web space.">Geocities</option>
</select>
<br>
<textarea rows=5 cols=21 wrap="virtual" id="text"></textarea>
and the Javascript :
function showtext() {
var dropdown = document.getElementById("example");
var curOption = dropdown.options[dropdown.selectedIndex];
var info = curOption.getAttribute('data_info');
var txt = document.getElementById('text');
txt.value = info;
}
Every time you select a new option it find the currently selected option, and then find the value of the data_info attribute of that option and set the value of the text area to it.
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