Develop Reference

How to enable/disable bootstrap option in select dropdown using javascript/jquery

im trying to disable specific option.here is my code
<select id="reportselect" name="r_name" class="selectpicker mdb-select md-form colorful-select dropdown-secondary" required >
<option value="" disabled selected>Choose report</option>
<option value="1">Report 1</option>
<option value="2">Report 2</option>
<option value="3">Report 3</option>
<option value="4">Other Reports</option>
<option value="5">Final Report</option>
</select>
i cant find any error.
<script type="text/javascript">
if(reportshowjs=='1'){
alert('11111e11111');
var selectobject;
selectobject = document.getElementById("reportselect").getElementsByTagName("option");
selectobject[3].disabled = true;
$('#reportselect').selectpicker('refresh');
}
</script>

Here is a Javascript example:
document.getElementById("reportselect").options[3].disabled = true;
Please verify this works for you.
The code I posted should work.
Frankly, your original code should also work.
I assume what's "not working" is the option remains "enabled".
Your best recourse is to step through the debugger, perhaps breaking your expression into individual pieces to see which (if any) is causing you grief.
EXAMPLE:
var idx = 3;
var s = document.getElementById("reportselect");
var o = s.options[idx];
o.disabled = true;
...
<= Single step through each of these in Chrome Developer Tools,
ensuring none are ever "null"...

Change "value" of combobox option JS

So, as the title says I want to change the value of a certain option using JS. I have already looked for it but every answer refers to changing the selected option not the value of a specifical option.
<select class="form-control">
<option value="0" selected>Ver</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
I want to change "Ver" option value from 0 to 1. I don´t know if it is possible but thanks in advance.

Have you tried assigning it an id and then changing it in your js file?
Something like this:
<option value='0' id='opt1' selected>Ver</option>
and in javascript:
document.getElementById("opt1").value = "1";

You can select the option with value 0 using
let opt = document.querySelector('select.form-control option[value="0"]')
You can then change the value by reassigning it
opt.setAttribute('value', '1')
If you have more than one select with class form-control this could be a problem, and you might want to give it/them a unique id — then the selector would be
let opt = document.querySelector('select#your-id option[value="0"]')
Here is a stack snippet doing this, where I've combined the select and the assignment into a single statement. I've also added a change event listener to show the value in the console, so if you switch to 20 then switch to Ver again it would print 20 and then 1 to the console, showing you that the value is indeed 1, not 0
document.querySelector('select.form-control')
.addEventListener('change', function(e) {
console.log(this.value);
});
document.querySelector('select.form-control option[value="0"]')
.setAttribute('value', '1');
select {
min-width: 10em;
}
<select class="form-control">
<option value="0" selected>Ver</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>

Hello you can assign the value with the following instruction
$("#SelectID").val("value option");
document.getElementById("SelectID").value = "value option";
reference in this url Set value of combobox or select

How to loop through elements that appear after an element?

I think I'm going to be able to post an answer to this in a few minutes...
Here's an example:
<script>
function ClearAndRunFuncs(element) {
//Clears answers to elements that are AFTER this element that HAVE an onchange
//Runs the unique onchange function to EACH element after clearing the answer
}
function FuncA(element) {
//does stuff
}
function FuncB(element) {
//does different stuff
}
function FuncC(elements) {
//does different stuff
}
function FuncD(element) {
//does different stuff
}
</script>
<select name=YesNo onchange="FuncA(this);ClearAndRunFuncs(this)">
<option value="">Please Select</option>
<option>Yes</option>
<option>No</option>
</select><br>
<br>
<input name=RandomInputA>
<select name=SomeOtherSelect onchange="FuncB(this);ClearAndRunFuncs(this)">
<option value="">Please Select</option>
<option>Yes</option>
<option>No</option>
</select><br>
<br>
<select name=AnotherSelect onchange="FuncC(this);ClearAndRunFuncs(this)">
<option value="">Please Select</option>
<option>Yes</option>
<option>No</option>
</select><br>
<br>
<input name=RandomInputB onchange="FuncD(this)">
<select name=LastSelect onchange="FuncE(this);ClearAndRunFuncs(this)">
<option value="">Please Select</option>
<option>Yes</option>
<option>No</option>
</select><br>
I want to reset the answers to element's that appear after the initial element is changed and run their corresponding functions (ClearAndRunFuncs(this);).
If you'd like a reason why, this type of code would help me to give a user a list of questions, and if they happen to answer them out of order, it would force them to re-answer questions that may branch in a different direction without needing to re-answer some fields that don't affect branching.
If you answer this with jquery, I'd appreciate extra details on whats happening since I'm new to jquery. The best answer would ideally have both javascript and jquery solutions with a detailed explanation of the jquery. Thanks everybody!

What I ended up using:
function ClearAndRunFuncs(element) {
var str = element.nextSibling;
var inputTypes = ["INPUT", "SELECT"];
while(str.name != "Stop") {
if(inputTypes.indexOf(str.tagName) > -1) {
if(str.onchange != null) {
str.value="";
str.onchange();
}
}
var str = str.nextSibling;
}
}
at the end of my script I wrote a <input name=Stop type=hidden> to stop the while loop.

Hide and display HTML elements based on what was chosen in a dropdown

My website is created in ASP classic - VBScript (not my choice and is a language I've not had experience with before this). I'm trying to create a webpage where in it: A dropdown menu reveals an additional dropdown based on what was selected in the first one. I'm trying to use a javascript function to achieve this.
Example:
In the first dropdown the user chooses ice cream or crisps.
Based on what the user selects another dropdown gives the choice of flavour.
Ice cream: vanilla, chocolate, mint.
Crisps: ready salted, cheese & onion, salt & vinegar.
This is what my code currently looks like:
HTML
<select id="food" onchange="fctCheck(this.value)">
<option value="">Choose an item</option>
<option value="icecream">Ice cream</option>
<option value="crisps">Crisps</option>
</select>
<select id="icecream" style="display:none">
<option value="vanilla">Vanilla</option>
<option value="chocolate">Chocolate</option>
<option value="mint">Mint</option>
</select>
<select id="crisps" style="display:none">
<option value="readysalted">Ready Salted</option>
<option value="cheeseandonion">Cheese and Onion</option>
<option value="saltandvinegar">Salt and Vinegar</option>
</select>
.
javascript
function fctCheck(food)
{
if (food == "")
{document.getElementById(food).style.display = "none";}
else
{document.getElementById(food).style.display = "block";}
}

as mentioned by st3inn this.value is absolutely fine - there is just the typo by document.getElement==>B<==yId.
But your code has the disadvantage, that a user could select both options and so both sub-selections would be visible.
You could avoid this by first hiding all sub-selections before showing the one for the selected item. This could be done that way (via the addiotional name-attribute, or, if you choose to work with jQuery you could do something more sophisticated instead):
Example (with comments) on JSFiddle
Javascript:
function fctCheck(food) {
var elems = document.getElementsByName("subselector");
for (var i = 0; i < elems.length; i++) {
elems.item(i).style.display = "none";
}
document.getElementById(food).style.display = "block";
}
HTML:
<select id="food"onchange="fctCheck(this.value);">
<option value="">Choose an item</option>
<option value="icecream">Ice cream</option>
<option value="crisps">Crisps</option>
</select>
<select id="icecream" name="subselector" style="display:none">
<option value="vanilla">Vanilla</option>
<option value="chocolate">Chocolate</option>
<option value="mint">Mint</option>
</select>
<select id="crisps" name="subselector" style="display:none">
<option value="readysalted">Ready Salted</option>
<option value="cheeseandonion">Cheese and Onion</option>
<option value="saltandvinegar">Salt and Vinegar</option>
</select>
Cheers,
Florian

You need to check for option value instead:
fctCheck(this.options[ this.options.selectedIndex ].value)
this.options is collection of <option> elements inside your current <select>, and this.options.selectedIndex is integer value that show what option currently selected.
BTW you have an typo in your code:
document.getElementbyId
should be
document.getElementById
See jsFiddle demo

You just have a typo.
function fctCheck(food)
{
if (food == "") {
document.getElementById(food).style.display = "none";}
} else {
document.getElementById(food).style.display = "block";
}
}
should work.
this.value
is equivalent to
this.options[this.options.selectedIndex].value

select and input copied into one input for posting

First off sorry for a re-post, I voted to delete my old post because I'm asking for help on the code now, not just which way is the better route. Any my code has changed several times
On my page there is a drop down to select a country, dynamically loaded from a db. Once the user selects a country two things can happen. 1) If they select Canada or the US a second drop-down appears and the user can select a region. 2) If the user selects any other country it creates an input box so that the user can type the region instead. This all works fine.
Now there is a third input which takes the province/state value so it can be posted. There are only two of us who will use this form so I'm not worried about JavaScript being turned off in the browser.
My issue is that when the user first selects the Canada/US and a region, nothing is filled into the third input unless they change the country selection. However, if they select a country other than Canada/US and have to type the region, it works as expected.
Here is an example of the issue: http://jsfiddle.net/owalsh/BQXZA/3/
If anyone can tell me why I'd appreciate it, thanks

Working here: http://jsfiddle.net/5A4v4/11/
HTML:
<form id="customer_bill_add_post" name="customer_bill_add_post">
<select id="country" name="country">
<option value="0">Select a country</option>
<option value="CA">Canada</option>
<option value="US">United States</option>
<option value="OT">Other</option>
</select>
<select id="province_select" name="province_select">
<option value="0">Select a Province</option>
<option value="AB">Alberta</option>
<option value="AL">Alabama</option>
</select>
<input type="text" id="province_input" name="province_input">
<input type="text" id="province" name="province" />
</form>
Jquery: code (there was some extra change event binding going on) you can prettify it.
$(function(){
//initially hide the textbox
$("#province_input").hide();
$("#province_select").hide();
$('#country').change(function() {
if($(this).find('option:selected').val() == "CA"){
$("#province_select").show();
$("#province_input").hide();
} else if($(this).find('option:selected').val() == "US"){
$("#province_select").show();
$("#province_input").hide();
} else {
$("#province_input").show();
$("#province_select").hide();
}
});
$('#country, #province_select, #province_input').bind("change", function() {
if($('#country').find('option:selected').val() == "CA"){
document.customer_bill_add_post.province.value = document.customer_bill_add_post.province_select.value;
} else if($('#country').find('option:selected').val() == "US"){
document.customer_bill_add_post.province.value = document.customer_bill_add_post.province_select.value;
} else {
//alert('foo');
document.customer_bill_add_post.province.value = document.customer_bill_add_post.province_input.value;
}
});
});
Cheers,