I have a select list. I am using jQuery to update the selected item. The displayed item in the box isn't updating when I change the selected value. In the following example option "a" is set as selected. Then I use jQuery to change the selected item to "d". It still shows "a". However if you expand the list you can see that "d" is selected or highlighted. Not sure how to fix the issue. Any help would be appreciated!
http://jsfiddle.net/9wQcs/5/
Html:
<select id="t">
<option>select one</option>
<option id="a" selected="selected">a</option>
<option id="b">b</option>
<option id="c">c</option>
<option id="d">d</option>
</select>
jQuery:
$(document).ready(function () {
$('#d').prop('selected', 'selected');
});
Thanks,
Brian
First of all, refrain from using .ready() in jQuery Mobile.
When selecting an option programmatically, you need to re-ehance selectmenu widget.
$("#id").prop("selected", true);
$("select_id").selectmenu("refresh");
Demo
Related
I am working on a form that requires a drop-down menu to be populated based on the value of another that is completed by the user first.
The two selects are "subject" and "topic". When the subject is chosen, the "topic" drop-down menu should contain all of the topics within that subject. E.g. for "maths" subject "topic" should show algebra, shape etc.
How can I achieve this? The values for both selects are done in PHP. For the first select, it is a simple task of using a for loop to populaate the select but it seems as though JavaScript must be used for the second. How shall I go about this?
Thanks in advance,
Ilmiont
Assume that, your first select has 2 options:
<option value="math">math</option>
<option value="english">english</option>
So, you can load second select's option something like this:
<option value="math-a">math-a</option>
<option value="math-b">math-b</option>
<option value="english-a">english-a</option>
<option value="english-b">english-a</option>
where a & b is representing different topic. You can initially hide the second select's option using jQUery or CSS.
Then, just use jQuery to show specific option based on first select like this:
$('#sub').change(function(){
$('#topic option').css('display', 'none');
var value = $(this).val();
if(value){
$('#topic option').each(function(){
var topic = $(this).val();
topic = topic.split('-');
topic = topic[0];
if(value == topic){
$(this).css('display', 'block');
}
});
}
});
Working fiddle.
Hope this will works!
I've tried to find answer to my problem through google, but had little success. I'm new to jQuery so the answer is probably simple.
I have 2 dropdown fields on my form, both being populated from the database.
<select name="fld_1" id="fld_1">
..set of options from DB..
</select>
<select disabled name="fld_2" id="fld_2">
Please select value from field above
</select>
2nd field is disabled until user selects a value from the first field. That value is passed to a php file which runs a database check, and returns a set of options. All of this is controlled by jQuery:
$(function() {
$('#fld_1').change(function() {
$('#fld_2').load('fetch.php?ccID=' + $('#fld_1').val());
});
});
PHP output if results found:
<option value="aaa">
aaa - descr
</option>
<option value="bbb">
bbb - descr
</option> ....
PHP output is no results found:
<option value="0">
No accounts found for this cost center
</option>
What I want to achieve is this:
if the value of the first option is 0 keep the dropdown disabled, if anything else remove the disable attribute.
Thank for the help
I'd suggest:
$('#fld_1').change(function(){
$('#fld_2').prop('disabled', $(this).val() === 0);
}).change();
JS Fiddle demo.
References:
change().
prop().
How do I hide a particular form field when a field is selected from a drop down in HTML?
You can't use php, as content has already been served to browser. So, a handy solution is to use javascript
<select name="foobar" onchange="checkAndHide(this.options[this.selectedIndex].value)">
<option value="right1">right1</option>
<option value="wrong">wrong</option>
<option value="right2">right2</option>
</select>
<input type="text" id="shouldHide" name="test">
<script type="text/javascript">
function checkAndHide(value){
if(value == 'wrong')
document.getElementById('shouldHide').style.display = 'none';
else
document.getElementById('shouldHide').style.display = 'block';
}
</script>
Yes you must use something that can communicate with the header which requires JavaScript or jquery, etc.
I don't have an example as I'm at work but I used jquery to load another page after a category is selected. This page generates the rest of the select fields (my sub categories) using a query and while statement ,inside the option tag once a category has been picked. There are many examples on google, just google jquery dynamic dropdown box
Is there any tutorial or code that help to poulate a textfield from a chosen value from a select box usuig AJAX or jQuery and PHP? Like in the picture ...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
//Please visit http://www.nokiflores.com
$(document).ready(function () {
$("#country").change(
function () {
$("#capital").val($(this).val());
}
);
});
</script>
<select id="country" name="country">
<option value="Delhi" >India</option>
<option value="manila" >phil</option>
<option value="tokyo" >japan</option>
</select>
<input type="text" readonly="readonly" value="" id="capital" name="capital" />
try this one:
if you want to use php you will do it another way using ajax.
Please visit http://www.nokiflores.com
I guess once you fill Delhi, the script can decide India, not opposite.
However if you want to make a subset of cities available, for selected country: that makes sense.
To your question, for this you would need a mammoth list of all major countries and there cities.
My approach:
In javascript make a array of 'country'.
Make a csv list for each country (like in.csv, us.csv etc.)
Now using JS populate country option fields.
Once country is selected, fire Jquery to fetch corresponding 'country-code.csv' using ajax.
Then Simply make a selection list of fetched city-names.
Note: Some people would object on CSV, choose any file format you find appropriate.
I have a select list, currently I have it implemented then when the user selects an item, the I have some javscript that creates a li on the fly on the places on the page, the problem is that I want the user the be able to select multiple items from the list, however the javascript cannot cope with this, but I need this functionality so that when I submit the form the values of the selct list go into the post.
Currently my javascript looks like this,
$('#sector').change(function() {
var selected = $(this).val();
//alert(selected);
$('#selected_sectors').prepend('<li>'+selected+'</li>');
});
Is it is possible to get this each time the user ctrl+selects and item is creates the li but and keeps the values accesible in the post?
Possibly something like this is what you're looking for (note the :selected selector).
<select id="items" multiple size="5">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
<option value="grape">Grape</option>
</select>
<ul id="sel-items"></ul>
$('#items').change(function(e){
$('#sel-items').empty();
$(this).find(':selected').each(function(i,e){
$('#sel-items').append($('<li>').text($(e).val()));
});
});
Working Example
(Working on one now that checks for deltas between the <select> and the <ul>)