Develop Reference

Not showing second option value

I want to get second option value print, how can I possible in this way. please update code below.
$('#select1').change(function() {
var form_data = {
userName: $('#select1').val()
};
var data1 = '<select class="selectpicker form-control m-b" data-live-search="true" data-style="btn-primary" name="site" id="siteSelect" required><option selected disabled > Please select site </option><option value="942">DEHIWALA</option><option value="941">KOLLUPITIYA</option><option value="944">MORATUWA</option><option value="940">PRIME LAND</option><option value="943">RATHMALANA</option></select>';
document.getElementById('selsear').innerHTML = data1;
});
$('#siteSelect').change(function() {
var form_data = {
userName: $('#siteSelect').val()
};
alert(form_data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<div id="selsear">
</div>
How to print second option ( I created in side javascript ) value?
please tell me how can i get value from second option.

$('#select1').change(function() {
var form_data = {
userName: $('#select1').val()
};
var data1 = '<select class="selectpicker form-control m-b" data-live-search="true" data-style="btn-primary" name="site" id="siteSelect" required><option selected disabled > Please select site </option><option value="942">DEHIWALA</option><option value="941">KOLLUPITIYA</option><option value="944">MORATUWA</option><option value="940">PRIME LAND</option><option value="943">RATHMALANA</option></select>';
document.getElementById('selsear').innerHTML = data1;
});
$(document).on('change', '#siteSelect', function() {
var form_data = {
userName: $('#siteSelect').val()
};
alert(form_data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<div id="selsear">
</div>
Use event delegation for dynamically created elements
Use .on()

Every time you update the innerHTML of selsear the handlers bound its previous children are removed (as they no longer exist). So we can either rebind those handlers, or delegate the event further up the DOM tree thanks to event bubbling.
When the change event happens on selsears child select element, we do not capture it directly. Instead we bind the handler to the document and allow it to bubble up. When the event is caught, we check that it originated from our target element - in this case an element with the id of siteSelect.
$('#select1').change(function() {
var form_data = {
userName: $('#select1').val()
};
var data1 = '<select class="selectpicker form-control m-b" data-live-search="true" data-style="btn-primary" name="site" id="siteSelect" required><option selected disabled > Please select site </option><option value="942">DEHIWALA</option><option value="941">KOLLUPITIYA</option><option value="944">MORATUWA</option><option value="940">PRIME LAND</option><option value="943">RATHMALANA</option></select>';
document.getElementById('selsear').innerHTML = data1;
});
$(document).on('change', '#siteSelect', function () {
var form_data = {
userName: $('#siteSelect').val()
};
alert(form_data);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<div id="selsear">
</div>
EDIT: Not used jQuery in a while, and just seen that delegate is deprecated. Changed to use on method.

The problem you are facing is that you are adding listener before adding the siteSelect item to the dom.
Add the listener inside the change function of the first select element.
Your change function of #select1 is called when any change of value happens in your select1 element and as you are adding the siteSelect element inside select1 and the element siteSelect is not added in the DOM until any change event is fired on the select1 DOM.
Hence, when you are trying to add change event on siteSelect it fails as there is no siteSelect element in the DOM at the moment so, no change event listener is added and none is fired from siteSelect.
Further you are selecting the value of select element wrong you can get selected value like this $('#select1 option:selected').val() or $('#select1 option:selected').text() to get the text instead of value property.
One solution is what is shown below
$('#select1').change(function() {
var form_data = {
userName: $('#select1 option:selected').val()
};
var data1 = '<select class="selectpicker form-control m-b" data-live-search="true" data-style="btn-primary" name="site" id="siteSelect" required><option selected disabled > Please select site </option><option value="942">DEHIWALA</option><option value="941">KOLLUPITIYA</option><option value="944">MORATUWA</option><option value="940">PRIME LAND</option><option value="943">RATHMALANA</option></select>';
document.getElementById('selsear').innerHTML = data1;
$('#siteSelect').change(function() {
var form_data = {
userName: $('#siteSelect option:selected').val()
};
alert(form_data);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<div id="selsear">
</div>

How to call javascript or jquery function inside dropdown

I have the following HTML code:
<select name = 'category' id='category'>
<option value="a">A <a href="" class = "edit" id ='1'> Click here to edit </a> </option>
<option value="b">B <a href="" class = "edit" id ='b'> Click here to edit </a> </option>
</select>
I am trying like this:
$(document).on('click','.edit', editfunction);
function editfunction() {
alert('hi');
//call here ajax code
}

Firstly your HTML is invalid; you cannot have a elements inside an option:
<select name="category" id="category">
<option value="a">A</option>
<option value="b">B</option>
</select>
To do what you require you can hook to the change event of the select, not the click of the a within the option. You can then use $(this).val() to get the selected value in editFunction():
$(document).on('change', '#category', editfunction);
function editfunction() {
var value = $(this).val();
console.log(value);
// AJAX...
}

Try using the following
$('#category').on('change', function(){
editfunction( $(this).val() );
})
function editfunction(val){
// Make your ajax call here
}
And You actually dont need the tag inside to make this happen
I think this is what u want JSFIDDLE example

How to use if else statements in select form?

In my registration page, I'm gonna use two drop-down select that one of them should be hidden if its Negative and if its positive new drop-down will open to choose ...
In mysql table I've table as diabetes name with enom
enum('negative', 'insulin', 'drug', 'ndm', 'mody', '')
Here's my code:
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>
<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
For example: If Diabetes is negative value is negative as default then Diabetes Type is hidden
and
If Diabetes is positive then Diabetes type will be appeared to choose items.
those values like insulin, drug, mdm, mody should be inserted into this:
value="positive"
How can I make it through java script?
I can't add class or div or span. Is it possible just through JavaScript using ??
Thank you so much

Use jquery, it is comparatively easier.
$(document).ready(function(){
$("#diabetestype").hide();
$("#diabetes").on("change", function(){
var v = $(this).val();
if(v=="positive"){
$("#diabetestype").show();
}else{
$("#diabetestype").hide();
}
});
});
To make this code workable, you need to add value of Positive option also. So instead value="" change it to value="positive".
You can even hide the label also:
$(document).ready(function(){
$("#diabetestype").closest("div").hide();
$("#diabetes").on("change", function(){
var v = $(this).val();
if(v=="positive"){
$("#diabetestype").closest("div").show();
}else{
$("#diabetestype").closest("div").hide();
}
});
});

<div><label for="diabetes">Diabetes:</label>
<select id="diabet" name="diabet" onchange="checkDiabet();">
<option value="negative">Negative</option>
<option value="positive" id="isDiabet">Positive</option>
</select>
</div>
<div id="type" style="display: hidden;">
<label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
<script>
function checkDiabet() {
var isDiabet = document.getElementById("isDiabet").selected;
if (isDiabet == true) { document.getElementById("type").removeAttribute("style"); }
else { document.getElementById("type").style.display = "none"; }
}
</script>
First, set the first select to fire the function checkDiabet() by the attribute onchange. Then give the option an id, which needs to be checked, so you can access it easily.
Then, set the second select to display: none This could be done in a CSS header or file, or like in this case inline. (div style=""), also add an id to access it easily. (div id="type")
Now comes the function checkDiabete(). It checks if the select is selected (can be true or false (bool)). Is selected => show (div id="type"), if not, hide this div (and all of it's contents)
(if is already hidden, it then overwrites the (style="display: none;") with (style="display: none;))
That's it! :)

Try this:
function SelectDiabetes() {
var d = document.getElementById("diabetes").value;
var dType = document.getElementById("diabetestypebox");
if(d == "negative")
dType.style.display = "none";
else
dType.style.display = "block";
}
SelectDiabetes();
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes" onchange="SelectDiabetes(this.value);">
<option value="negative">Negative</option>
<option value="positive">Positive</option>
</select>
</div>
<div id="diabetestypebox"><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>

Call a js function onchange of select id diabetes
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes" onchange="toggleTypes()">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>
<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" style="display:none" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
Use the following javascript
function toggleTypes(){
var el=document.getElementById('diabetes');
var medElem=document.getElementById('diabetestype');
if(el.value=='positive') {
medElem.style.display='block';
} else {
medElem.style.display='none';
}
}

How can I put the selected option of a <select> from a dynamically generated form into an input field

I have a form, where you can dynamically add steps by clicking a button. Each step contains different input fields. One step has a ,which is filled with some options like this.
<select id="zutatenListe" name="zutatenListe" onchange="updateZutaten()">
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
It is possible that there are multiple of it, all with the same id and name.
Next to the select, there is always an input field like this:
<input id="selectedZutat" type="text" value="" name="wiegen_zutat[]">
What I want to make is that when you change the selected option, your selected option will be shown only in the input element next to the changed select. It works for the first one, but for all other selects, it doesn't. My code is this:
function updateZutaten(){
var eingabe;
eingabe = $("#zutatenListe option:selected").text();
$( "#selectedZutat").val(eingabe);
}
My guess is that it only works for the first select element, because the other select elements have the same id. Has anyone an idea how to take care of this problem?
Please don't get confused by the German names, but I'm from Germany.
Thank you everyone :)

Identifiers must be unique and as you are using jquery bind event using it.
Add a common class to target the <select> element, this will help you select them using Class Selector (".class") and bind event using it, then you can use .next() target the next <input> element.
Here in exmple I have added zutatenListe class to <select> element.
$(function() {
$(document).on('change', '.zutatenListe', function() {
var text = $(this).find("option:selected").text();
$(this).next(".selectedZutat").val(text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select class="zutatenListe" name="zutatenListe">
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
<input class="selectedZutat" type="text" value="" name="wiegen_zutat[]">
</div>
<div>
<select class="zutatenListe" name="zutatenListe">
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
<input class="selectedZutat" type="text" value="" name="wiegen_zutat[]">
</div>

Maybe work on the change() event?
$("#zutatenListe").change( function () {
var eingabe;
eingabe = $("#zutatenListe option:selected").text();
$( "#selectedZutat").val(eingabe);
})
So it will always set the selected option when the change event fires?

Use unique ID attributes for each set of input and selects. HTML and Jquery require this.
HTML4 Spec
HTML5 Spec

Here's a way to do it in JavaScript.
function updateZutaten(element) {
var option = element.options[element.selectedIndex];
var parent = element.parentElement;
var textBox = parent.getElementsByTagName("input")[0];
textBox.value = option.text;
}
.formItems {
list-style-type:none;
padding:0;
margin:0;
}
.formItems li {
border-bottom:1px solid #EEE;
padding: 10px 0;
}
<form id="myForm">
<ul class='formItems'>
<li>
<select id="zutatenListe"
name="zutatenListe"
onchange="updateZutaten(this)">
<option value="">--Choose--</option>
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
<input id="selectedZutat"
type="text" value=""
name="wiegen_zutat[]"
/>
</li>
<li>
<select id="zutatenListe"
name="zutatenListe"
onchange="updateZutaten(this)">
<option value="">--Choose--</option>
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
<input id="selectedZutat"
type="text" value=""
name="wiegen_zutat[]"
/>
</li>
</ul>
</form>

Adding an element with keypress event

So I'm just learning JavaScript and I'm trying to make a payment calculator for my church's daycare. I want a second div with class "child" (all the 'stuff' inside it) to be added to the div with id "children". I have it where a simple div is added with a key press but it won't add a third. How do I add more than one div and how do I add a div with all the 'stuff'? Code is below:
<div id="input">
<div id="children">
<div class="child">
<h2>Choose Child's Class</h2>
<select id="primary" class="selector">
<option value=" ">Select Class</option>
<option value=200>Infants</option>
<option value=175>Wobblers</option>
<option value=175>Toddlers</option>
<option value=165>PreSchool 3's</option>
<option value=165>PreK 4's</option>
<option value=75>Schooler Before & After</option>
<option value=40>Schooler Before Only</option>
<option value=65>Schooler After Only</option>
<option value=60>Schooler AFA Before & After</option>
<option value=20>Schooler AFA Before Only</option>
<option value=30>Schooler AFA After Only</option>
<option value=40>Part Time</option>
</select>
</div><!--closes child class div-->
</div><!--closes children id dive-->
<h3> Press any key on your keyboard to add another child</h3>
and the javaScript
$(document).ready(function(){
var $newChild=$('<div class="child">Testing</div>');
$(document).keyup(function(){
$newChild.appendTo($('#children'));
});
});

So for starters this is how your javascript should look like so you can add many divs
$(document).ready(function(){
$(document).on('keyup', function(){
var $newChild=$('<div class="child">Testing</div>');
$newChild.appendTo($('#children'));
});
});
or
$(document).ready(function(){
$(document).on('keyup', function(){
var $newChild=$('<div class="child">Testing</div>');
$('#children').append($newChild);
});
});
You need to clarify the rest of your question why do you mean by stuff?

Your jQuery needs to be something like:
$(document).ready(function() {
var childHtml = "<div class='child'>Child</div>";
$(document).keyup(function() {
$('#children').append(childHtml);
});
});
jsFiddle: http://jsfiddle.net/ek922tz2/7/