Develop Reference

How do I show option title from select menu in another spot

I am trying to get the title attribute from a selected Option in a Select menu. I have spent over a day on this and I am seeking help. I found a couple of ways to use the value attribute but now I need to use the title attribute somewhere else on the page.
Here is my current attempt although I have been through many iterations. I have listed two possible scripts although only one will eventually be used. The first possible script might include Jquery and if it does and it can be used here, can you translate it into Javascript, as I am not good at either? Do I have the elements in the correct order?
<select id="amount_id" onclick="function()">
<option value="" disabled="disabled">Amount</option>
<option value="0" title="None">0</option>
<option value="1" title="One Quarter">1/4</option>
<option value="2" title="One Half">1/2</option>
<option value="3" title="Three Quarters">3/4</option>
<option value="4" title="All">100%</option>
</select>
<textarea id="displayTitle"></textarea>
<script>
$(document).ready(function(){
$(document).on('click','#amount_id',function(){
var result = $("option:selected",this).attr('title');
$("#displayTitle").text(result);
});
});
</script>
OR
<script>
function run(){
document.getElementById("displayTitle").value =
document.getElementById("amount_id").value;}
</script>
Thank you.

Here is a JavaScript alternative of the first code :
<select id="amount_id">
<!-- removed onclick -->
<option value="" disabled>Amount</option>
<option value="0" title="None">0</option>
<option value="1" title="One Quarter">1/4</option>
<option value="2" title="One Half">1/2</option>
<option value="3" title="Three Quarters">3/4</option>
<option value="4" title="All">100%</option>
</select>
<textarea id="displayTitle"></textarea>
<script>
document.getElementById("amount_id").addEventListener('change',function(){
var eTitle = this.options[this.selectedIndex].getAttribute('title');
document.getElementById("displayTitle").value = eTitle;
});
</script>

How can i use values from ng-model for ng-show?

i'm a newb in angular and have some trouble to figure out how to use the values from ng-model in the correct way.
I made two drop-down lists and want to create a dependence between these two. The second list shall be displayed, depending on the user input of the first.
In this case the user shall select the kind of fermentation of a beer (here Obergärig for top-fermented) and the second drop-down should only be shown if the user took 'Obergärig'. I tried it with ng-show, but it doesn't work and i have no idea why or even if i use it the right way.
I would be very thankful if someone could give me a short explanation what i'm doing wrong.
Html for the first drop-down:
<div ng-controller="BierController">
<select ng-model="Bierart" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
</div>
Html for the second drop-down:
<div ng-controller="OberController" ng-show="Bierart == 'Obergärig'">
<select ng-model="OberBier" ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</div>
And here's the .js:
app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];});
app.controller("OberController", function($scope) {
$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];});
That's my first post here, so i'm thankful for every advise to improve the quality of this post. Also, please excuse my bad english.

Just do the next steps:
Use the same controller for both selects.
Create some $scope variable to save the condition of the first select.(e.g. $scope.selectedBeer)
Set the condition i ng-show property of the second select.
Example:
JS file:
app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];
$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];
$scope.selectedBeer = "";
});
HTML file:
<div ng-controller="BierController">
<select ng-model="selectedBeer" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
</div>
<div ng-controller="BierController" ng-show="selectedBeer == 'Obergärig'">
<select ng-model="OberBier" ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</div>
I may have done some syntax mistakes as I was coding this without any IDE, but the main idea is described. Good luck!

Your selects have to be managed by one controller. So, your code should look like:
<div ng-controller="BierController">
<select ng-model="Bierart" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
<div ng-show="Bierart === 'Obergärig'">
<select ng-model="OberBier" ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</div>
</div>
.js:
app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];
$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];});

Here's the new html:
<div ng-controller="BierController">
<select ng-model="selectedBeer" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
</br>
{{selectedBeer.name}}
<div ng-show="selectedBeer == 'Obergärig'">
<select ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</br>
{{selectedBeer.name}}
</div>
And the .js
app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];
$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];
$scope.selectedBeer = "";
});
Thanks for the advise, i'll install ng-inspect FF.

Jquery Select field populates Input field

I am trying to Select one of the options from the drop-down and populate the input field with the correct values.
I want to set the value 1 to ($100) val 2 to ($200)
I will not have access to a database to store the values.
<div class="row">
<div class="form-group">
<select class="form-control" id="costfield" name=
"costfield">
<option value="Select Country"> Select Country</option>
<option value="1"> country 1</option>
<option value="2"> country 2</option>
<option value="1"> country 3</option>
</select>
</div>
</div>
<div class="form-group">
<input type="estimate" class="form-control" id="exampleInputEstimate1" placeholder="Estimate">
</div>
</div>
<script>
$( "#costfield" ).val();
$( "#estimate" ).text( "this" ).show();
</script>
</div>

You can store the values in the HTML5 data- attribute for each <option> element. This approach is useful when there is no direct relationship between the option's value attribute and the dollar value you are assigning it to.
p/s: type="estimate" is not a valid attribute value. Try type="text" (anyway, browsers will parse invalid type into text automagically.
// Listen to change
$('#costfield').change(function() {
$('#exampleInputEstimate1').val($(this).find('option:selected').data('dollar-value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="form-group">
<select class="form-control" id="costfield" name="costfield">
<option value="Select Country">Select Country</option>
<option value="1" data-dollar-value="$100">country 1</option>
<option value="2" data-dollar-value="$200">country 2</option>
<option value="1" data-dollar-value="$100">country 3</option>
</select>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="exampleInputEstimate1" placeholder="Estimate" />
</div>

$('[name="costfield"]').change(function () {
console.log("test");
var cost = this.value;
var str = "";
switch (cost) {
case "1":
str = "$100";
break;
case "2":
str = "$200";
break;
}
$("#exampleInputEstimate1").val(str);
});
JSFiddle

You could use jQuery to get the value from the Select when it changes and then change the value of the input accordingly. So put this in between the script tags.
$('#costfield').on('change', function() {
var value = $(this).val();
$('#exampleInputEstimate1').val(value);
});

You can either set your option values to be 100 or 200 then on any change in the drop down set the value of your input to the value.
$("#costfield").on("change", function(){
$("#exampleInputEstimate1").val($("#costfield").val());
} );
If you want to keep your option values as they are then you can still use the same as above with a small change. (on the assumption that 1 will be 100, 2 will be 200, 3 will be 300, and so on)
$("#costfield").on("change", function(){
$("#exampleInputEstimate1").val($("#costfield").val() + "00" );
} );
Also you may want to put a new option and set it as blank with no value that way you force the user to select something. Or you can set the input on document load and keep the number of options you have. AKA:
<option value="" ></option>

HTML javascript not working

I have this html with javascript, but I don't know why it's not working. It's right now supposed to calculate the values of the two textboxes when the button is pressed. However nothing is happening.
Code:
<!DOCTYPE html>
<html>
<body>
<h1>HTML Räpellys 2</h1>
<select id="mathType">
<option value="0">Addition</option>
<option value="1">Subtraction</option>
<option value="2">Multiplication</option>
<option value="3">Division</option>
<option value="4">Shift Left</option>
<option value="5">Shift Right</option>
<option value="6">Increment</option>
<option value="7">Decrement</option>
<option value="8">AND</option>
<option value="9">OR</option>
<option value="A">XOR</option>
</select>
<p></p>
<form>
Value 1: <input type="text" id="val1" value=""></input>
<p></p>
Value 2: <input type="text" id="val2" value=""></input>
</form>
<p></p>
<button onclick="mathFunc">Calculate!</button>
<p></p>
<script>
function mathFunc() {
var box1 = document.getElementById("val1").value;
var box2 = document.getElementById("val2").value;
if (document.getElementById("mathType").value == 0) {
document.write(box1 + box2);
}
}
</script>
<noscript>Java is required to display this element!</noscript>
</body>
</html>

The issue is that the function should be called on click: onclick="mathFunc()".
Generally, I would recommend you not to use document.write in the code but for debugging purposes use browser console and console.log function.
MDN: https://developer.mozilla.org/en/docs/Debugging_JavaScript#Console.log_in_Browser_Console

the <form> tag should contain the form elements...
eg
<form>
<select...
then I'd also make sure I don't get the string value of the input fields byt wrapping them with parseFloat(). eg:
var box1 = parseFloat( document.getElementById("val1").value ) ;
you also need to call the function as a function, basically what VisioN said above:
onclick="mathFunc()"

Displaying a div based on a dropdown selection

I have a part of jsp code like this :
<div>
<label>Choose the type of procedure you want :</label><select id="proc-type">
<option value="with-param">With parameters</option>
<option value="without-param">Without parameters</option>
</select>
</div>
Now, if user chooses with parameters, the following div should be displayed :
<div class="drop" id="drop">
<label> Select Procedure (without parameters) : </label> <select id="combobox" name="combobox">
<option>proc 1</option>
<option>proc 2</option>
</select>
And, if its without parameters, this should be displayed
<div class="drop" id="drop">
<label> Select Procedure (without parameters) : </label> <select id="combobox" name="combobox">
<option>proc 3</option>
<option>proc 4</option>
</select>
<label>Parameter : </label> <textarea rows=1 cols=30 ></textarea> <br>
<label>Parameter : </label> <textarea rows=1 cols=30 ></textarea> <br>
</div>
I've tried the jquery code as :
$(document).ready(function () {
$(".dropdown").hide();
$(".drop").hide();
$("#proc-type").change( function(){
var opt="";
opt= $parseInt($("select option: selected").val());
if(opt == "with-param"){
("#dropdown").show(700);
}
else {
("#drop").show(700);
}
});
});
But it doesn't seem to work.Can anyone suggest me how to do it ?

The standard javascript function is parseInt, not $parseInt. And, from what I understand, you don't need it - val() already returns the string value.
Also, to get the value from a <select>, you can call val() on it directly. So, your line becomes:
opt = $(this).val();
Since the this becomes the element on which the event happened - the select itself.
At last, you might want to hide() the other div after showing the correct one, in case the user changes its mind.

well, first of all, ID should always be unique (that is why it is called id) .
so make sure you have unique id for all elements.
secondly, i cannot find any elements with id as dropdown in your code ( are you missing that?)
anyways ,
the solution,
HTML
<div class="drop" id="drop1"> //<---here
<label> Select Procedure (without parameters) : </label>
<select id="combobox1" name="combobox">
<option>proc 1</option>
<option>proc 2</option>
</select>
</div>
<div class="drop" id="drop2"> //<---here
<label> Select Procedure (without parameters) : </label>
<select id="combobox2" name="combobox">
<option>proc 3</option>
<option>proc 4</option>
</select>
<label>Parameter : </label> <textarea rows=1 cols=30 ></textarea> <br>
<label>Parameter : </label> <textarea rows=1 cols=30 ></textarea> <br>
</div>
jquery
$(document).ready(function () {
$(".drop").hide();
$("#proc-type").change( function(){
if(this.value == "with-param"){
$("#drop1").show(700);
$("#drop2").hide();
}
else {
$("#drop2").show(700);
$("#drop1").hide();
}
});
});

You cannot have same ids for multiple element instances that way, id should be unique per element in a single page. i suggest you to change like this:
<div class='wrapperdiv'>
<div class="drop with-param">
<label> Select Procedure (with parameters) : </label>
<select id="combobox1" name="combobox1">
<option>proc 1</option>
<option>proc 2</option>
</select>
</div>
<div class="drop without-param">
<label> Select Procedure (without parameters) : </label>
<select id="combobox1" name="combobox1">
<option>proc 1</option>
<option>proc 2</option>
</select>
</div>
</div>
in css hide the divs:
.drop{ display:none; }
so your jquery should be like this:
$('#proc-type').on('change', function(){
var div2show = this.value;
if(div2show == 'with-param'){
$('.with-param').show();
$('.without-param').hide();
}else{
$('.with-param').hide();
$('.without-param').show();
}
}).change();
or this (If your both div are contained in some wrapper div):
$('#proc-type').on('change', function(){
var div2show = this.value;
$('.'+div2show).show().siblings('div').hide();
}).change();
Fiddle