We Keep Coding

How to get my javascript to look for class or anything other than val

I have a javascript script that looks for the value and of dropdown and changes the next dropdown menu based on what the value is, however this will no longer work for me as i need to pass the value back to ruby so i can save it in sessions.
$(document).ready(function() {
$('#Exposures').bind('change', function() {
var elements = $('div.exposures').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if something is selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
$('.second-level-select').bind('change', function() {
var elements = $('div.second-level-container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if something is selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select class="pmmargin3 exp" size="1" id="Exposures" title="" name="exposures_pt1">
<option selected disabled hidden style='display:none' value=''>-Please select an option-</option>
<option value="1">thing1</option>
<option value="1">thing2</option>
<option value="2">thing3</option>
<option value="1">thing4</option>
<option value="3">thing5</option>
</select>
<div class="container exposures leftmargin exp">
<div class="1">
<select class="second-level-select" name="exposures_pt2a">
<option selected disabled hidden style='display:none' value=''>- Please select an option-</option>
<option value="guardrail_system">thing1</option>
<option value="personal_fall">thing2</option>
<option value="safety_net">thing3</option>
</select>
</div>
<div class="2">
<select class="second-level-select" name="exposures_pt2b">
<option selected disabled hidden style='display:none' value=''>-Please select an option-</option>
<option value="guardrail_system">thing1</option>
<option value="personal_fall">thing2</option>
<option value="safety_net">thing3</option>
<option value="infeasibility_option">thing4</option>
</select>
</div>
<div class="3">
<select class="second-level-select" name="exposures_pt2c">
<option selected disabled hidden style='display:none' value=''>-Please select an option-</option>
<option value="current_subpart">thing5</option>
<option value="proposed_subpart">thing6</option>
</select>
</div>
</div>
Thank you for any help, I'm fairly new to Javascript and am trying my best but still need some guidance.

As per what I understood. You want to send data selected in first dropdown to ruby to save it in Session.
If that is the case, on every select you can trigger AJAX call with cookies and update the session object accordingly and also subsequently display it in second dropdown as well.
Though, onChange AJAX is not a really good suggestion, in that scenario you can save selected option into browser sessionStorage and later add it to session object by a single ajax to your server at the end of your selection(dropdown) cycle.

Well i figured out how to get my results back and keep the value the same in my code so nothing else breaks here is how i did it.
$(document).ready(function() {
$('#Exposures').bind('change', function() {
var elements = $('div.exposures').children().hide(); // hide all the elements
var value = $(this).val();
*added* var exposuredd = document.getElementById("Exposures");
*added* var selectedText = exposuredd.options[exposuredd.selectedIndex].text;
*added* document.getElementById("exp1").innerHTML="<input type='text' name='exposures_pt1' value='"+selectedText+"' >";
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
$('.second-level-select').bind('change', function() {
var elements = $('div.second-level-container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
});
this needs to be in the erb im using this in
<p hidden id="exp1"></p>
So now i can pass whatever text is in my options to ruby such as...."Hey Here I am"
<option value="1">Hey Here I am</option>

Put value from javascript combo box

I want to get the value from a combo box in javascript.
This is the combo box code:
<select name="no_kk" style="width: 68%;" class="select2" id="no_kk" onchange="get_Nokk(this.value);" >
<option value="">-- Pilih Nomor KK --</option>
<?php
$kk = get_no_kk();
foreach ($kk as $key => $value) {?>
<option value="<?php echo $value->no_kk;?>"><?php echo $value->no_kk;?></option>
<?php
}
?>
</option>
</select>
I want to put the value I choose in this code here:
<div class="right">
TAMBAH
</div>

Here you have a problem. Is better for you to leave the href empty and then replace it using JS. I let you an example:
function calculateURL(option){
return a + option;
}
(function() {
console.log(document.querySelector(".button-submit-blue").href)
document.querySelector("#mySelect").addEventListener("change", function(evt){
var option = document.querySelector("#mySelect").value;
document.querySelector(".button-submit-blue").href = calculateURL(option);
alert("The value selected is: "+document.querySelector("#mySelect").value);
alert("The new link is: " + document.querySelector(".button-submit-blue").href)
}, false);
})();
<script>
var a = "http://www."; //this represents values grab from PHP
</script>
<select id="mySelect">
<option value="">--</option>
<option value="google.com">google</option>
<option value="yahoo.com">yahoo</option>
</select>
<div class="right">
TAMBAH
</div>
This is easy. First of all you need to set a listener for the change event on your select. This is set using addEventListener function. This function has several arguments, the first is the event you want to listen, change, the second is the callback, which will be executed everytime the event change is fired. Finally, you only have to take the selected option and recalculate your url.

Select option from selectbox

How can I select an option with javascript (/console in google chrome)?
This is a part of the html code:
<nobr>
Element<br>
<span class="absatz">
<br>
</span>
<select name="element" class="selectbox" style="width:114" size="12" onchange="doDisplayTimetable(NavBar, topDir);">
<option value="0">- All -</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">X</option>
<option value="4">C</option>
<option value="5">D</option>
<option value="6">E</option>
<option value="7">F</option>
<option value="8">G</option>
<option value="9">H</option>
<option value="10">I</option>
<option value="11">J</option>
<option value="12">K</option>
<option value="13">L</option>
<option value="14">M</option>
<option value="15">N</option>
<option value="16">O</option>
<option value="17">P</option>
<option value="18">Q</option>
<option value="19">R</option>
</select>
</nobr>
Or http://pastebin.com/JSaKg4HB
I already tried this:
document.getElementsByName("element")[0].value = 1;
But it gives me this error:
Uncaught TypeError: Cannot set property 'value' of undefined
at :2:48
at Object.InjectedScript._evaluateOn (:875:140)
at Object.InjectedScript._evaluateAndWrap (:808:34)
at Object.InjectedScript.evaluate (:664:21)
EDIT:
I I tried it but it don't works on for the full website. Maybe because there is another html tag inside the first html tag(if I download the website, there is another html file called welcome.html where the selectbox is.) I thinks it's in an iFrame, because chrome gives me the Option "show Frame".
EDIT 2:
I can access the frame where the selectbox is but I still won't find the selectbox. Here is the code of the frame(not the full code): pastebin.com/iVUeDbYV

Try this:
document.querySelectorAll('[name="element"]')[0].value;
Although it is very weird that getElementsByName is not working for you. Are you sure the element is in the same document, and not in an iFrame?

The simple answer:
document.getElementById("select_element").selectedIndex = "option index";
Where option index is the index of the option in the dropdown that you'd like to activate.
You can get the index of an option by using this:
var selected = document.querySelector( '#'+div+' > option[value="'+val+'"]' );
Where div is the ID of the <select> tag.
how this helps!

This will do what you want.
document.querySelector('[name="element"]').value = 4 // The value you want to select
and this will retrieve the value
var value = document.querySelector('[name="element"]').value; // 4
this explains what's going on
var option = document.querySelector('[name="element"]');//option element
option.value; // 4
option.selectedIndex; // 4
option.selectedOptions; // [<option value="4">C</option>]
option.selectedOptions[0].innerText; // C
option.selectedOptions[0].value; // 4
Remember that selectedOptions is an array because more than one option may be selected, in those cases, you will have to loop through the array to get each value. As per Hanlet Escaño's comment, make sure your code is set to execute after the DOM has loaded.
window.onload = function() {
document.querySelector('[name="element"]').value = 0; // sets a default value
}

javascript enable and disable a combobox

I am a beginner in java-script , what I am doing right here is trying to make my combo-box named "dale" to enable and disable when i select "Reasons Specific Categorized" from my combo-box named "repSelect" but i keep getting an error on my java-script.
function makeEnable(value){
if(value=="rep4"){
var x=document.getElementById("dale")
x.disabled=false
}else{
var x=document.getElementById("dale")
x.disabled=true
}
}
</script>
</script>
<select onChange="makeEnable(value)" name="repSelect">
<option value="rep1">Employee</option>
<option value="rep2">Category Reasons Overall </option>
<option value="rep3">Department Overall </option>
<option value="rep4">Reasons Specific Categorized </option>
</select>
<select name="dale">
<option value="rep1">dale</option>
</select>
<input class="button" type="submit" value="Generar Reporte" >
</form>
My modification But dosent work
function makeEnable(){
var e = document.getElementById("repSelect");
var strUser = e.options[e.selectedIndex].value;
if(strUser=="rep4"){
document.getElementById("dale").disabled=false;
}else{
document.getElementById("dale").disabled=true;
}
}

You are using the .getElementById() method, but your element doesn't have an id defined. Add an id in the html:
<select id="dale" name="dale">
You may also need to modify the call to your function in the first select's onchange handler, to pass this.value instead of just value:
<select onChange="makeEnable(this.value)" name="repSelect">
You can also substantially simplify your function as follows:
function makeEnable(value){
document.getElementById("dale").disabled = value!="rep4";
}
Demo: http://jsfiddle.net/3t16p5p9/
EDIT: I just noticed that you had the jquery tag on your question. To use jQuery, remove the inline onChange= attribute and then add this to your script:
$(document).ready(function() {
$("select[name=repSelect]").change(function() {
$("#dale").prop("disabled", this.value!="rep4");
}).change();
});
This binds a change handler to the first select, and then calls it immediately so that the second one will be appropriately enabled or disabled when the page loads (as requested in a comment).
Demo: http://jsfiddle.net/3t16p5p9/2/

Actually you are using document.getElementById but your combobox doesn't have an Id.
Thats the reason its not working.
Instead of adding onchange in the html, use as below:
<select id='repselect' onchange=makeEnable() name="repSelect">
<option value="rep1">Employee</option>
<option value="rep2">Category Reasons Overall </option>
<option value="rep3">Department Overall </option>
<option value="rep4">Reasons Specific Categorized </option>
</select>
<select id="seldale" name="dale">
<option value="rep1">dale</option>
</select>
<input class="button" type="submit" value="Generar Reporte"/>
$('#repselect').change(function(){
if(this.value=="rep4"){
var x= document.getElementById("seldale")
x.disabled=false
}else{
var x =document.getElementById("seldale")
x.disabled=true
}
});

Add/Removing Options with JQuery

I'd like to add and remove options from one drop down menu using JQuery given a selected option in another.
HTML:
<form action='quickLook.py' method = 'post'>
First DropDown Menu
Specify Channel:
<select id='bolometer'>
<option selected id='Dual' value = 'Dual' >Dual
<option id='Top' value = 'Top' >Top
<option id='Bottom' value = 'Bottom' >Bottom
</select>
Second DropDown Menu
<br>Specify Data to Display:
<select id='target'>
<option selected id='Spectrum' value = 'Spectrum'>Spectrum
<option id='Interferogram' value = 'Interferogram'>Interferogram
<option id='SNR' value = 'SNR'>SNR
<option id='Diff_Band' value = 'Diff_Band'> Diff_Band
</select>
<input type='submit' value= 'Query Images'>
</form>
I'd like to do something like this is JQuery:
$("#Dual").click(function() {
$("#target").append("#Diff_Band");
$("#target").remove("#Interferogram");
$("#target").remove("#SNR");
});
$("#Top").click(function() {
$("#target").append("#Interferogram");
$("#target").append("#SNR");
$("#Diff_Band").remove();
});
I want to append or remove the already written html.
What is the best way to do this?
Thank you for your time!

This is a similar problem I've encountered before working with Safari. A solution is to use .detach() instead of remove() as it keeps all jQuery data associated with the removed elements. Check this jsfiddle: http://jsfiddle.net/Ueu62/