Develop Reference

Finding selected value in a select box

I'm making a quiz application involving a select box. The user selects an option and when they press a button, it should check if the selected option is the correct answer by checking an array of values. I can't figure out how to get the selected value from the select box. I've tried to find information about this, but I only want to use JS, no JQuery. I tried using:
var item = document.getElementById("selections");
var selection = item.options[item.selectedIndex].value;
but I get a Type Error, saying that item.selectedIndex isn't defined. I'm confused because from what I found, selectedIndex is a default property of select tags? I've only worked with radio buttons before, using a for loop and checking every option to see which was checked, but I can't use that here. I don't know if it matters, but I'm doing this without a form tag, just linking a js function to an event listener on a button. Any help would be appreciated. Thanks!
Edit: Here is a fiddle of my code as per request: https://jsfiddle.net/jmf68ycu/
The part where the problem lies is in the submit() function in the first line.
Update: I found something online about the problem having to do with JS trying to call the element before the element is loaded, so I put the variables inside the function, which is only called when the button is pressed. The problem still persists (same error).

You use like this
var item = document.getElementById("selections").value;
you select value store item variable
this code use full for you. :)

You have a syntax error somewhere. your code looks right. you probably aren't getting the right id. your first line probably doesn't return the right select.
var e = document.getElementById("bla");
var str = e.options[e.selectedIndex].value;
alert(str);
<select id="bla">
<option value="val1">test1</option>
<option value="val2" selected="selected">test2</option>
<option value="val3">test3</option>
</select>

Making Chosen Dropdown Read only (not disabled)

I'm looking to make a chosen dropdown menu read only, and I need to do this dynamically using a jQuery selector. If I set it to disabled using:
$("#dropdownDepartment").attr("disabled","disabled").trigger('chosen:updated');
the value isn't POSTed but I need it to be.
I have tried
$("#dropdownDepartment").attr('readonly',true).trigger('chosen:updated');
but this doesn't work.
I'm using Chosen v1.4.2 and jQuery v2.1.4.
Help appreciated! Thank you.

The best solution for me was such an ugly trick $("#dropdownDepartment").prop('disabled',true).trigger('chosen:updated').prop('disabled',false).
So chosen is disabled but value from select is POSTed.

There are a few options you could do.
Disable the drop down and store the value in a hidden field and send that in a POST.
Disable all the other selections so only the one selected is enabled
$('#dropdownDepartment option:not(:selected)').attr('disabled', true);
Disable the drop down and before you do a post enable it
When you want to disable it turn it into a read only textbox

try this:-
var select = $('select');
var oldVal=$('select').val();
select.chosen().on('change',function(e){
select.val(oldVal);
select.trigger("chosen:updated");
});
Demo

I have a workaround at the same. So hope it will help someone in the future (I guess you already did the solution).
First print the selected option value of the chosen select into a hidden input like the following. For $_POST value get the value from this hidden input $_POST['myselect']:
<input type="hidden" name="myselect" value="selected_option_value_goes_here" />
Then disable the chosen select. But it is safe to set the hidden input value to the current one before disable it:
$('input[name=myselect]').val($(".chosen-select").val());
$('.chosen-select').attr("disabled", true).trigger("chosen:updated");
N.B. If you don't want to disable it then just no need to update the value of the hidden input on change event of the chosen select.
A working demo can be found by clicking here.

I may be late to the party, but I came across the same issue as OP. The workaround I have found to post back the values even if they are disabled is to re-enable them when the form is submitted.
$("form").bind("submit", function () {
$("#TheList *").prop("disabled", false).trigger("chosen:updated");
});
Notice the [space][star] after TheList, it is to recursively re-enable each child in the list.

we can achieve the excepted behaviour by removing the pointer event on chosen-container div.
with this even if we dont enable the input its value will be posted with form submit
//to disable
$('.chosen').parent().find('.chosen-container').css({'pointer-events': 'none','opacity':0.5});
//to enable
$('.chosen').parent().find('.chosen-container').css({'pointer-events': '','opacity':1});

try this
$("#dropdownDepartment").attr('disabled', 'disabled');
$("#dropdownDepartment").data('chosen').search_field_disabled();
$("#dropdownDepartment").removeAttr('disabled');
$("#dropdownDepartment").trigger('chosen:updated');

JQuery fill the form but failed to be recognized

I am using Flask as the backend. And I wrote a simple form with WTForm, say,
field = StringField('input:', validators=[Required()])
And I write a JQuery to fill it automatically
$('#theidofthefield').val('fillingin');
And I click the submit button in the form but it shows that the field is empty. And I check the request.form.field.data is also empty.
Hope to get a solution.

I have no idea about WTForm but you can check if your field element has got the name attribute, which is required to send back to the backend code.
Your field has to be something like this:
<input type="text" name="thenameofthefield" id="theidofthefield" />
//-----------------^^^^^^^^^^^^^^^^^^^^^^^---name attribute is required.

Another way to fill value is:
$('#theidofthefield').attr('value','filling');
Lets see if it works..
In case variable field is pointer to the object then..
$(field).val('dfsdf') or $(field).attr('value','filling') may work.

Change the value of a select box (html) from javascript

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);

Do something when input field gets updated through jquery

I have input field
<input type="text" name="vehicle_make[]" id="make1"/>
and i have help dropdown that updates this field if user choose to do so. I do it trough standard jquery code
$("#make1").val("value");
Problem is, since i use validate plugin to validate this field, if user click on validate before entering anything in that box, he will get notice that he needs to fill it, but then if he fills it trough dropdown, validate plugin will not detect it until user click on submit again.
I know i could call submit in function in which i process dropdown, but i think that it is not right solution, since i would need to check if validation is already done before doing that (since if it is not, it would start validation before i want it to start).
I also need to tie some other things to that field also, so i would like to know is there is a way in which i could write function so it always check if field is filled, even if user did not fill it directly.
Sorry if i didn't explain everything right, this is my first message here.

Try this
$("#make1").change(function(){
//do something there
});

I have found solution. First, i created js variable form_submitted, and added onclick event to submit button, to change value of variable form_submitted to yes. Then, i created function:
function update_validation(){
if(form_submitted == 'yes'){
$("#my_form").valid();
};
};
that i call when user do something that is not detected regularly with validate plugin. This function manually starts validation again, but only if it has been started before by clicking on submit.