I have two multiselect boxes and the user can move items from one box to other (accomplished using Javascript). However, when I post the form, the POST value for the multiselect box where the user moves items to is empty. If I select a few of them and then postback, I can see the ones I selected.
My question is....can I get all the values in a particular select box regardless of whether or not they're selected?
<select multiple="multiple" class="form-control" id="viewSelected" name="viewSelected[]">
//options go here
</select>
Thank you!
Jason
I think you are asking about dependable dropdown list. Am i right?
To get option values and text you can loop through them
$('select option').each(function(){
let value = $(this).attr('value');
let text = $(this).text();
});
To print according to the value of first box, you need to give a class to the first box. Every time after clicking the box a unique id will be generated.
According to that, you can get data in the second box by using Ajax function
Related
I have a dropdown with 4 options. I want these options to be prepopulated depending on value that is selected from a different field. The different field is a "countries" field.
If country "A" or country "b" is selected, I want the dropdown to populate option 1.
If a different country, populate option 2.
Thanks in advance
You can try the following:
Find which event is fired when a user change the first dropdown value
Register a function to this event
In this function, detect what is the new input from the first dropdown. Check it, and change the value of the second dropdown depending on this check (How do I programmatically set the value of a select box element using JavaScript? could be useful for the implementation)
If you have issue trying to do it, do not hesitate to ask :)
I've got a regular drop downlist for selecting the countries name as text and countries_id as value.
Example:
<option value="1">Afghanistan</option>
Now I need an hidden form field with the ISO2 code for the country.
Example:
<input type="hidden" name="iso2" id="inputIso2" class="form-control">
And when the country is changed by the drop downlist, the hidden field should also change.
I've added the ISO2 to the option like this:
<option value="1" data-iso2="AF">Afghanistan</option>
But how do I pass it to the hidden field?
Or is there a better way of doing this?
The ISO2 field is being used by another script in the form, so it should work pre post.
This isn't really a PHP problem so much as it is a javascript problem. You need to put an event listener on your select element and when it changes, grab data-iso2 and apply the value to the hidden field.
Using jQuery, you'd do this:
$("#country").change(function(){
var iso2 = $(this).find(':selected').data('iso2');
$("#inputIso2").val(iso2);
});
I have a select box in my webpage to fill a formulary. I want to recover the info filled by the user other times in it exists.
All my fields are properly filled except select box.
This is my code in html related to selectbox:
<br>Gender: <select id="gender">
<option value="man">Man</option>
<option value="woman">Woman</option><br>
It is a simple webpage just with a formulary in it. There is not anything else. I am just trying it.
With this line:
$(document).on("pageinit", '#settings', function() {
document.forms[0].gender.value = userGender;
...
I am modifiying the value of that box for reading it in other parts of my webpage or send it to the database. And the value keept is the correct one, but, the displayed value is not propertly shown.
Do you know which property do I have to modify to change the displayed value?
According to your question the asnwer developerCK has provided is correct.
Anyway look this demo and give a feed back if any thing we missed.
$('#gender').val('woman');
If you are using jQuery, then you can change or select the value of select box through jQuery!
It is very easy. Use selector and val.
$('#gender').val(userGender);
I have an HTML select element (combo box) in a form with a couple if options in it. As always each option has a specific value. During the page's initialization I get a value from the server that I must use as the selected option in the list. Sometimes however I get a value from the server that does not match any of the available options. (grrrr)
I want to let the user know that the value I got from the server is not a valid option. What I'd like to do is show an empty select box (as if no selection was made) without having an actual empty option as one of the options. Also I'd like to use the default select element if possible. Is something like this possible?
Edit: When you set the value for a combox to '' in IE9 (I used $('select').val('') ) it empties the text in the combo box which is exactly what I need. Unfortunately only IE9 does this, so this is not an option.
Out of the box, HTML selects do not provide such functionality. You will have to add an empty <option value="somethingwrong">Please, pick a value</option> element and use scripting to check if the user has selected this specific value. I'd suggest catching both onchange event of the dropdown and onsubmit event of whole form.
You can insert option in select, and remove that whenever it is changed to reduce problems with that options
Check the Demo here
What i would like to have is sort of this which doesnt work:
http://jsfiddle.net/adige72/BS9rp/
If i select an option, all values of input text fields change but in fact i would like to only one text field to be populated which is next to that dropdown list i select from.
Is this possible?
It is absolutely possible with jquery. On the example in that link you are selecting based on the class of the input boxes "phonenumber". If you select based on the the actual control Id it will not populate all the input boxes on the screen. Please see below for example:
$("#dropdownlistID").live("change", function() {
$("#inputfieldID").val("update with whatever you want");
})
Many ways to do this including using id's on the fields but using your fiddle, you could do this:
$(this).next($('.phonenumber')).val($(this).find('option:selected').attr('data-phonenumber'));
Yea. Use unique ids for each drop down and text field and that will get you in the right direction.
<select id="IDX" class="name" name="name[]">
...
<input id="textIDX" type="text" class="phonenumber"...
...
$('#IDX').change(function(){
$('#textIDX').val('anything....');
});