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){
});
Related
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.
I am relatively new to Spring MVC and Dojo/Dijit widgets and I am stuck with a problem. I need to unblock a particular div based on the option selected from the dropdown i.e. when the user selects the reason as "Unexperienced" I am supposed to unblock a div with id = "unexpUser" style="display:none;" to collect some additional information.
JSP -
<select data-dojo-type="dijit.form.Select" name="userReason" id = "reason">
<option value="opt0">Experienced</option>
<option value="opt1">Not experienced</option>
</select>
JC -
<script>
if(dijit.byId('reason').value == "opt1"){
unexpUser.style.display = 'block';
}
</script>
When the page loads, the option displayed on the dropdown is "Experienced". When I change the option to "Not experienced" , I need to unblock the div but this particular code doesn't seem to be the right code for comparing. Please help.
.value is not the right way to get value from a dijit widget instead use:
dijit.byId('reason').get("value")
Use onchange listener :
dijit.byId('reason').on("change",function(evt){
alert(evt); //(evt == value of option )
// your code here
});
okay I got my mistake. This is the solution. #Harpreet Singh your solution works perfectly with this code.
JSP-
<form:select data-dojo-type="dijit.form.Select" path "" name="userReason" id = "reason" onchange="myFunction1();">
<option value="opt0">Experienced</option>
<option value="opt1">Not experienced</option>
</form:select>
and in my JS I created a function for the String comparison.
JS -
<script>
function myFunction1(){
if(dijit.byId('reason').get("value") == "opt1"){
unexpUser.style.display = 'block';
}
</script>
this works. Thank you so much for your help!
I have a list of group and in each group I have a list of members. In jsp each group is shown in a row of table and each row contains a dropdown of members. Please see the image below -
What I am trying to do is - if I select a member from the dropdown then it's onchange trigger a javascript function and the user Id is shown in an alert.(for test purpose I'm now using alert, later I use the userId/member ID for other task).
In the first dropdown there are some members - razib, syeful, proshanto. If I select a member from the first dropdwon then the member id is shown properly in the alert. But if I select any member from the other dropdwon (displaying the member name bulbul and rony) then the javascript function is not triggered. Can any one help me what are the problems with the code -
The jsp snippet -
<select id="userSelect" name="user">
<c:forEach items="${group.users}" var="user" varStatus="status">
<option id="aUser" value="${user.id}"> <c:out value="${user.name}"/> </option>
</c:forEach>
</select>
And the javascript snippet is -
$(document).ready(function() {
$('#userSelect').change(function(event) {
var userId = $("select#userSelect").val();
alert("User ID :"+userId);
});//change()
}); //document.ready()
Thanks in advance
UPDATE: The answer given by San Krish and Carsten Løvbo Andersen works for a single single id of <select>. But I have multiple <select> with the id "userSeelct" because this is in a forEach loop. If I use class instead of ID then it is also not working.Please see How the <select> actually in my code-
<c:forEach id="groupId" var="group" items="${groupListForm.groups}" varStatus="status">
<select id="userSelect" name="user">
<c:forEach items="${group.users}" var="user" varStatus="status">
<option id="aUser" value="${user.id}"> <c:out value="${user.name}"/</option>
</c:forEach>
</select>
</c:forEach>
The earlier given answer is OK for a single <select>. But I think the problem is the <select> is also in a for each loop and there are multiple <select> with the same id/class. In this case how can I solve the problem? Thanks again.
You can simply do it as,
$(document).ready(function() {
$('#userSelect').on('change', function() {
alert( this.value ); // or $(this).val()
});
});
You can do something like this.
$("#userSelect").on("change", function() {
alert( this.value );
});
This should solve your problem!
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/
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/