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"...
Related
I'm pretty much brand new to JS, and working on a small web page to teach myself a little bit. I feel like this would have been answered before, but I don't know how to word it better to find it.. sorry!
basically, I have two templates set up in HTML, for two select boxes, which will be re-used quite a few times across the form. then I have a function that is called Onchange for select 1, and will change what is visible in select 2, I managed to reference select 1 with (this), but I'm completely at a loss as to how to reference the second one.
function myFunction(selectObject)
{
if (selectObject.value == 'option1')
{
//code to reference Select2 here
option3.disabled = true;
option3.style.display = "none";
}
}
<template id="Select1">
<select name="Select1" onchange="myFunction(this)">
<option value="option">option</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
</template>
<template id="Select2">
<select name="Select2" >
<option value="option3">option</option>
<option value="option4">option1</option>
<option value="option5">option2</option>
</select>
</template>
thanks for any help!
Something like this? I am not sure why are you using template tags.
function myFunction()
{
var select1 = document.querySelector("#Select1>select");
var select2 = document.querySelector("#Select2>select");
var option3Visible = select1.value != 'option1';
var option3 = select2.querySelector("option[value='option3']");
option3.disabled = !option3Visible;
option3.style.display = option3Visible ? "inline" : "none";
}
<div id="Select1">
<select name="Select1" onchange="myFunction()">
<option value="option0">option0</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
</div>
<div id="Select2">
<select name="Select2" >
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
</div>
Basically you need to get familiar with events, dom query API and possibly CSS selectors.
If you're using templates, you need to search inside content property of the corresponding template:
let t1 = document.querySelector('#Select1');
let t2 = document.querySelector('#Select2');
// there are many ways how to select an element, here simple element selector is used
let select1 = t1.content.querySelector('select');
let select2 = t2.content.querySelector('select');
let option3 = t1.content.querySelector('[value=option3]');
// add event listener is preferred to your `onchange` attribute binding
select1.addEventListener('change', function() {
// modify select2 here
option3.disabled = true;
option3.style.display = "none";
});
Here iam trying to get values based on #category selection when i select a category men or women,following select option should show the relevant options.what i did satisfied my requirement but when i try to access it using keyboard(down arrow) it shows all the options of the #subcategory.here is the code and fiddle.any help is thankful.
my fiddle http://jsfiddle.net/JUGWU/
HTML:
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1">MEN</option>
<option value="WOMEN" id="menu2">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing">Clothing</option>
<option id="Accessories" value="Accessories">Accessories</option>
<option id="Footwear" value="Footwear">Footwear</option>
<option id="Watches" value="Watches">Watches</option>
<option id="Sunglasses" value="Sunglasses">Sunglasses</option>
<option id="Bags" value="Bags">Bags</option>
</select>
Jquery:
$(document).ready(function(){
$("#category").change(function() {
var xyz = $("option:selected").attr("id");
alert(xyz);
if(xyz === "menu1"){
$("#subcategory option").hide();
$("#Clothing,#Footwear").show();
}
});
});
Try this in your conditional. The disabled property doesn't allow keyboard selection. Seems to work for me.
$("#subcategory option").prop('disabled', true).hide();
$("#Clothing,#Footwear").prop('disabled', false).show();
Also, your logic breaks if a user switches from men to women.
This answer is not exactly addressing your problem (using keyboard(down arrow)) but I think it is IMHO a better way to do what you want. And also I used the fixed part from #user2301903 answer, just to make my point. my main point here was using the markup attributes.
We can use our markup attributes to have less complexity, I changed your markup like this (added a catg attribute):
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1" catg="m">MEN</option>
<option value="WOMEN" id="menu2" catg="w">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing" catg="m">Clothing</option>
<option id="Accessories" value="Accessories" catg="w">Accessories</option>
<option id="Footwear" value="Footwear" catg="m">Footwear</option>
<option id="Watches" value="Watches" catg="w">Watches</option>
<option id="Sunglasses" value="Sunglasses" catg="w">Sunglasses</option>
<option id="Bags" value="Bags" catg="w">Bags</option>
</select>
and your code like this:
$(document).ready(function () {
$("#category").change(function () {
var catg = $("option:selected").attr("catg");
//from #user2301903 answer
$("#subcategory option").prop('disabled', true).hide();
$("option[catg=" + catg + "]").prop('disabled', false).show();
});
});
and this is your working DEMO;
and this one is another way of doing what you want which works even in IE: IE_DEMO
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
I am trying to simulate a javascript to choose from the dropdown list below. I am trying this code here but its not working.
$('select[name="srctype"]').val(2).trigger('change');
Am i doing something wrong here? Is my javascript messed up for this layout of code below?
I am trying to choose value="single"
<select name="srctype" class="formselect" onchange="typesel_change()">
<option value="any" selected="selected">any</option>
<option value="single">Single host or alias</option>
<option value="network">Network</option>
<option value="pptp">PPTP clients</option>
<option value="pppoe">PPPoE clients</option>
<option value="l2tp">L2TP clients</option>
<option value="wan">WAN subnet</option>
<option value="wanip">WAN address</option>
<option value="lan">LAN subnet</option>
<option value="lanip">LAN address</option>
</select>
Do this:
$('.formselect').val('single').trigger('change');
In your code you're trying to set a val 2 that doesn't exist. The value you're interested is actually single as you mention in your question.
Here's a demo: http://jsbin.com/eXONuhu/1/
Try:
$('select[name="srctype"]').val('single')
or
$('select[name="srctype"] option:eq(1)').prop('selected',1)
As you noted in your comment, this worked for you:
(function ($) {
$('select[name="srctype"]').val('single');
}).call(this, jQuery);
var myVal = $('select[name="srctype"] option:eq(1)').attr('value');
$('select[name="srctype"]').val(myVal).trigger('change');
Or an optimized version
var mySelect = $('select[name="srctype"]');
var myVal = $('option:eq(1)', mySelect).attr('value');
mySelect.val(myVal).trigger('change');
Fiddle - http://jsfiddle.net/P6Ayz/1/
I have three select boxes, that the user would choose in terms of priority. I have used sport for this example. At present I've set the css to hide the 2nd and 3rd priority selects until the first box has been completed and so on.
The issue I have is that as the values are all duplicate, i'd like to disable selection, IE. If a user selects "Golf", then this should be disabled in priority2, and priority3. In addition if a user selects "Football" for priority2 then both "Golf" and "Football" should be disabled.
HTML:
<form>
<table>
<tr><td>
<label for="Priority">Please state your priorities</label></td><td>1st PRIORITY
<select class="formSelect" name="priority1" onChange="p1(priority1);" onClick="p1(priority1);" width="175px" id="priority1" size="1" tabindex="22";>
<option value="0">No Preference</option>
<option value="1">Football</option>
<option value="2">Golf</option>
<option value="3">Tennis</option>
<option value="4">Boxing</option>
</select>
</td>
<td>2nd PRIORITY
<select name="priority2" class="chidden" onChange="p2(priority2);" onClick="p2(priority2);" width="175px" id="priority2" size="1" tabindex="22";>
<option value="0">No Preference</option>
<option value="1">Football</option>
<option value="2">Golf</option>
<option value="3">Tennis</option>
<option value="4">Boxing</option>
</select>
</td>
<td>3rd PRIORITY
<select name="priority3" class="chidden" width="175px" id="priority3" size="1" tabindex="22";>
<option value="0">No Preference</option>
<option value="1">Football</option>
<option value="2">Golf</option>
<option value="3">Tennis</option>
<option value="4">Boxing</option>
</select>
</td>
</tr>
</table></form>
CSS:
.chidden {visibility: hidden;}
.cvisible {visibility: visible;}
Javascript:
var priority1 = document.getElementById("priority1");
var priority2 = document.getElementById("priority2");
var priority3 = document.getElementById("priority3");
function p1(priority1) {
if(document.getElementById("priority1").selectedIndex > 0){
document.getElementById("priority2").className="cvisible";
}
else{
document.getElementById("priority2").className="chidden";
document.getElementById("priority2")[0].selected = "1";
document.getElementById("priority3").className="chidden";
document.getElementById("priority3")[0].selected = "1";
}
}
function p2(priority2) {
if(document.getElementById("priority2").selectedIndex > 0){
document.getElementById("priority3").className="cvisible";
}
else{
document.getElementById("priority3").className="chidden";
document.getElementById("priority3")[0].selected = "1";
}
}
Apologies for the quality of code, its only a start at the moment. I have tried to use the following to disable selection but not sure how to implement it. I would be grateful for any help with this (in Javascript);
//for (var i=0; i< document.getElementById("priority2").length; i++){
//if(document.getElementById("priority1").selectedIndex == document.getElementById("priority2")[i]){
// document.getElementById("priority2")[i].disabled = true;
//}
//}
If you have the all select boxes with same class name and calling a function
onchange=sel_box(this.value) you can use following
$('.chidden option[value="'+opt+'"]').attr("disabled", true);
here opt is option that you passed to sel_box() function
I don't think you can set options as visible/hidden in css, but you can disable them.
See: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_disabled
EDIT
100% wasn't questioning that. Was only concerned about your method of hiding/showing.
This should do what you're looking for
http://jsfiddle.net/RaBuQ/1/
Actually just realized there is a bug. See if you can get it. If not I'll update in a bit.
EDIT 2
This should get you what you need. http://jsfiddle.net/RaBuQ/5/
EDIT 3
This isn't pure javascript (still jQuery), but I wanted the answer to be complete to your spec. If I have time, I may re-visit with a pure javascript answer, but don't wait for me. If you get it working, make sure you post the answer to your own question. Good luck!
http://jsfiddle.net/RaBuQ/8/