Develop Reference

Toggle element on selection from dropdown menu in Bootstrap 3.0

I'm using Bootstrap 3.0 for Ruby on Rails 4.2.5, and I need to make it so that in this form when the user selects the option "No" from the drop down menu, the next text field is shown to them, otherwise, the text field remains hidden. I've found a similar question with this solution, but I couldn't implement it with the Bootstrap form, this is my attempt at it :
Dropdown Input:
<%= f.select :answer, [["Yes", 1], ["No", 0]], label: "Do you wish to bla bla? ", class: "selectpicker", Id: "selectpicker" %>
Toggled Input (should show when "No" is picked) :
<%= f.text_area :explain , label: "Please explain why not", Id: "sdd"%>
Javascript: `
("selectpicker").change(function changetextbox());
function changetextbox()
{
if (document.getElementById("selectpicker").value === 0 ) {
document.getElementById("sdd").disable='true';
} else {
document.getElementById("sdd").disable='false';
}
}
`
I tried changing value === 0 to value == 0 and the 0 to No, but it still doesn't work.
They're in my code in this order, but I'm not sure how this should work with the bootstrap form tags. Thanks in advance.
Reference : This is the question from which i got this code
Enable/disable of textbox on option selected from drop down menu

$(document).on('change', '#selectpicker', changetextbox);
function changetextbox() {
if (document.getElementById("selectpicker").value === '0') {
document.getElementById("sdd").disabled = true;
} else {
document.getElementById("sdd").disabled = false;
}
}
You forgot $ and there is no selectpicker selector, you have to use class or ID like .selectpicker or #selectpicker when you use jQuery (depends on your HTML).
There is no disable, you have to use disabled and you can't use quotation marks for true and false.
You can't use .change(function changetextbox()), just use $(document).on('change', '#selectpicker', changetextbox).
0 must be in quotation marks.
I assume your textarea is only disabled (not hidden by CSS).
CODEPEN EXAMPLE

Try :
<select id="selectbox" name="mfi_4_a_i">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" id="sdd" disabled="true" />
JS
$(function(){
var $sdd = $('#sdd');
$('#selectbox').on('change', function(){
if($(this).val()==='0'){
$sdd.prop("disabled", false);
}else{
$sdd.prop("disabled", true);
}
})
});
Also check https://jsfiddle.net/k5gy365k/3/

You need to update your code,
HTML
<select id="selectbox" name="mfi_4_a_i">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" name="mfi_4_a_ii" id="sdd" />
JS
$("#selectbox").change(function() {
changetextbox();
});
function changetextbox(){
if (document.getElementById("selectbox").value === '0') {
document.getElementById("sdd").disabled = true;
} else {
document.getElementById("sdd").disabled = false;
}
}
See the example: https://jsfiddle.net/8mag64es/6/
And if you want more cleaner jquery way, you can update your JS code as below,
var selectbox = $("#selectbox"),
textbox = $("#sdd");
selectbox.change(function() {
changetextbox();
});
function changetextbox(){
if (selectbox.val() === '0') {
textbox.prop('disabled', true);
} else {
textbox.prop('disabled', false);
}
}
Example: https://jsfiddle.net/8mag64es/8/

How do I show a message for a specific dropdown selection using javascript?

I would like to show a message when someone makes a specific selection from an HTML dropdown list. I have this so far:
<select name="configoption[56]" onchange="recalctotals()">
<option value="235"">USA</option>
<option value="206">Europe</option>
</select>
<span class="message">You selected USA!</span>
And the script:
$(document).ready(function() {
$('#configoption[56]').change(function() {
var selectedValue = $('#configoption[56]').find(":selected").text();
if ( selectedValue == '235' ) {
$('.message').show();
} else {
$('.message').hide();
}
});
});
The above does not appear to be working for me, any suggestions? I would also like to be able to show the message on multiple selected values.

Well your .change function is specifically binded to an element with id="configoption[56]" So just add id to your select element as below
<select name="configoption[56]" id="configoption[56]" onchange="recalctotals()">
//Options
</select>
UPDATE
As per #T.J.Crowder's suggestion on invalid selector I would like to modify a slight change on the id. You can use configoption56 as id and write your select.change as follows:
<select name="configoption[56]" id="configoption56" onchange="recalctotals()">
<!--Options-->
</select>
.change
$('#configoption56').change(function() {
//other codes
});

$('#configoption[56]') is looking for an element with the id, not name, configoption[56] (or it would be, but the selector is invalid, you'd have to escape those brackets).
To use the name:
$('select[name="configoption[56]"]')...
Separately, you can just use val, you don't have to use find to get the selected option. You can also use toggle for show/hide:
$(document).ready(function() {
$('select[name="configoption[56]"]').change(function() {
$('.message').toggle($(this).val() == '235');
});
});
Re your comment about toggling based on || and two values:
$(document).ready(function() {
$('select[name="configoption[56]"]').change(function() {
var value = $(this).val();
$('.message').toggle(value == '235' || value == '123');
});
});

I should be doing it like this: http://jsfiddle.net/nmn17cr6/
HTML:
<select name="configoption[56]" id="configoption" onchange="recalctotals()">
<option value="1">Dummy</option>
<option value="235">USA</option>
<option value="206">Europe</option>
</select>
<span class="message">You selected USA!</span>
CSS:
.message {
display:none;
}
jQuery:
$(document).ready(function() {
$('#configoption').change(function() {
var selectedValue = $(this).val();
if ( selectedValue == '235' ) {
$('.message').show();
} else {
$('.message').hide();
}
});
});

Your approach needs a little modification. All you had to do these changes
$(document).ready(function() {
$("select[name=configoption[56]]").change(function() { // change jquery selector for name
var selectedValue = $('#configoption[56]').val(); // and val to get the value
if ( selectedValue == '235' ) {
$('.message').show();
} else {
$('.message').hide();
}
});
});
And with the same jQuery code. below has to be
<select name="configoption[56]" >
// onchange="recalctotals()"> was not required

form select option dynamic attr

I need to make Select name with option value, to select a specific value or index. the data where comes from db in a value "{{design}}".
I do get the value currectly, but I dont manage to set "selected" on the currect option value.
here is the code:
console.log("{{design}}");
$(document).ready(function () {
var options = $('select').children('option');
var size = $('select').children('option').length;
for (i=0;i<size;i++)
{
if ( options[i].innerHTML==="{{design}}")
{
options.selectedIndex=i;
}
}
});
the html is :
<select name="design" required id="design" >
<option value="1">flowers</option>
<option value="2">classic</option>
<option value="3">roses</option>
</select>
I need to make to currect {{design}} value, lets say it's 2, so it will be <option value="2" selected>classic</option>`
thanks!
SOLVED
Hi, found the solution to the issue, if anyone eles goes into trouble.
$(document).ready(function () {
var options = $('select').children('option');
var size = $('select').children('option').length;
for (i=0;i<size;i++)
{
if ( $('select').children('option')[i].value === "{{design}}")
{
$('select').children('option')[i].selected=true;
}
}
});
the currect way is to find the right option value and then-> [i].selected=true
goodluck

Try this
var selectedvalue=2; //option with value 2 should be selected
$("#design option[value=selectedvalue]").attr("selected","selected");
Hope this helps...

If I understood right, you are on the right path just taking a minor detour. Try this:
if ( options[i].innerHTML==="{{design}}")
{
options.attr('selected', 'selected');
}
The example of .each() usage:
$(document).ready(function(){
$('select option').each(function(i){
if( i.value === "{{design}}"){
$(this).attr('selected','selected');
}
});
});

try this:
$(document).ready(function(){
$('select option').each(function(i){
//if this option contains the word "{{design}}" Then this is selected
if( $(this).html().indexOf("{{design}}") != -1)
$(this).attr('selected',true);
});
});

Change Javascript function from checkbox to select

I have a function that based on a checkbox id determines a price value. This works fine except I need to change the checkbox to a select. I tried to change the line:
if(peo14.checked==true)
To this:
if(peo14.select==Yes)
This did not work...how do I alter this to a Yes/No select?
function peoPrice()
{
var peoPrice=0;
//Get a reference to the form id="quicksheet"
var theForm = document.forms["quicksheet"];
//Get a reference to the checkbox id
var peo14 = theForm.elements["peo14"];
//If they checked the box set peoPrice to value
if(peo14.checked==true)
{
peoPrice=199;
}
//finally we return the peoPrice
return peoPrice;
}

You have to use the .options property and choose the selected index, then get the value of that index.
if (peo14.options[ peo14.selectedIndex ].value === 'Yes') {
peoPrice = 199;
}

Select Box
<select id="peo14" name='peo14' >
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
function peoPrice()
{
var peoPrice=0;
var e = document.getElementById("peo14");
var peo14val = e.options[e.selectedIndex].value;
if(peo14val=="Yes")
{
peoPrice=199;
}
//finally we return the peoPrice
return peoPrice;
}

Is there any handler that can detect if a select field has any option selected without jQuery

When an option is selected that wasn't previously, the onChange handler can detect this. How can a preselected option be detected (i.e., whether a select field has any option selected)? Is this possible without jQuery? Is there a handler, such as onSelected (not the same as onSelect for highlighted text) for this event?
Example:
<select onSelected="FunctionRunIfOptionSelected()">
<option> ... </option>
...
</select>
The preselected option will have been selected on page load. i.e., with the HTML dynamically rendered:
<option selected> ... </option>

If I understand, the task is to tell if an option has the selected attribute hard-coded into the HTML? If so, this should work:
function test () {
var opts = document.getElementById("myselect").options;
var i, len = opts.length;
for(i = 0; i < len; i++) {
if (opts[i].getAttribute("selected" ) != null ) { // opts[i] has the selected attribute
change_other_select(i); // pass the option index to your other function
break;
}
}
}
window.onload = test;
The trick is to distinguish between the selected property and the selected attribute, and also between a null value and an empty string.

var myselect = document.getElementByid('selectid');
myselect.options[myselect.selectedIndex];

To test for selected option on page load, you'll need to catch these in the window.onload handler
One the page is loaded you'll need to continue to use the onChange handler, but use selectedIndex property to test if this is populated with an index within your option list.
Alternatively give your options values in the HTML and check the values themselves. This will allow deterministic behavior when expanding the option list.

Yes, using the .options[] and .selectedIndex methods you can handle this cleanly and unobtrusively like so:
HTML
<select name="select" id="select">
<option value="">...</option>
<option value="1">One</option>
<option value="2" selected="selected">Two</option>
</select>
JavaScript
window.onload = function(){
var select = document.getElementById("select"), selected = select.value;
select.onchange = function(){
var val = select.options[select.selectedIndex].value;
if(val != selected) {
alert("Another value " + val + " was selected, which is not the same as the default value of " + selected);
} else {
alert("Same value as the default of " + selected + " was selected");
}
};
};
From within the JS, you can check and manipulate the val variable as you like.

You can detect if the select field does not have the default value selected like this:
var selects = document.getElementsByTagName("select");
for (i=0;i<selects.length;i++) {
if (selects[i].selectedIndex != 0) {
eval(selects[i].getAttribute("onSelected"));
}
}