Develop Reference

How to return html code in a javascript function with conditional statements with select onchange

by selecting the option it has to return the html tags
<select onchange="getval(this);">
<option value="none" selected>none</option>
<option value="1">Blood Group</option>
<option value="2">Donor name</option>
</select>
<script>
function getval(sel)
{
if (sel == 1) {
return '<label for="Bloodgroup">Blood Group</label>
<select name="bg" class="form-control" id="exampleFormControlSelect1">
<option value="O+" selected>O+</option>
<option value="O-">O-</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
</select>';
}else if (sel == 2) {
return ' <label for="name">Name</label>
<input type="text" name = "name" class="form-control" required>';
}
}
</script>
I want an output by choosing the options
for example: if the option is selected as bloodgroup
else if it is donor name

There's a couple of issues in your code. Firstly the argument you're passing to the getval() function is the select element reference, not the value which was selected, so the if condition needs to read the value property from the argument.
In addition your return statements in the function won't do anything alone, as nothing is done with the values you provide back from the function. To add the HTML in the strings to the DOM you need to call a function or property of a target element to append the content to. In the following example that's done using querySelector and innerHTML respectively:
let content = document.querySelector('#content');
function getval(el) {
if (el.value == 1) {
content.innerHTML = `<label for="Bloodgroup">Blood Group</label>
<select name="bg" class="form-control" id="exampleFormControlSelect1">
<option value="O+" selected>O+</option>
<option value="O-">O-</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
</select>`;
} else if (el.value == 2) {
content.innerHTML = `<label for="name">Name</label>
<input type="text" name = "name" class="form-control" required>`;
}
}
<select onchange="getval(this);">
<option value="none" selected>none</option>
<option value="1">Blood Group</option>
<option value="2">Donor name</option>
</select>
<div id="content"></div>
However it's also worth noting that using inline event handlers in onclick attributes is no longer good practice. In addition, storing HTML within your JS should be avoided. A more modern solution would be to use an unobtrusive event handler and have all the HTML within the DOM when the page loads and simply toggle its visibility.
As you've tagged the question with jQuery, here's an example of how to do that:
let content = $('#content');
$('select').on('change', e => {
$('.toggle').hide().filter(`.${e.target.value}`).show();
});
.toggle { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value="none" selected>none</option>
<option value="bloodgroup">Blood Group</option>
<option value="donor">Donor name</option>
</select>
<div id="content">
<div class="toggle bloodgroup">
<label for="Bloodgroup">Blood Group</label>
<select name="bg" class="form-control" id="exampleFormControlSelect1">
<option value="O+" selected>O+</option>
<option value="O-">O-</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
</select>
</div>
<div class="toggle donor">
<label for="name">Name</label>
<input type="text" name = "name" class="form-control" required>
</div>
</div>

how to check a value from select, if you choose to give a value then it is not necessary?

this is my html,
I have two select if one select contains a value, then the required attribute is deleted,and the third select must be required
<select class="form-control costume-{{$stud}}" name="subject-{{$stud}}[]" id="sub1" disabled="disabled">
<option value="" selected> --------Select-------- </option>
<option value="math,indonesia">Math (Indonesia)</option>
<option value="math,english">Math (English)</option>
</select>
<select class="form-control costume-{{$stud}}" name="subject-{{$stud}}[]" id="sub2" disabled="disabled">
<option value="" selected> --------Select-------- </option>
<option value="science,indonesia">Science (Indonesia)</option>
<option value="science,english">Science (English)</option>
</select>
<select class="form-control select-long costume-{{$stud}}" name="location_id[{{$stud}}]" disabled="disabled">
<option value="" selected> -----Select------</option>
#foreach ($venue as $row)
<option value="{{$row['location_id']}}">{{$row['location_name']}}</option>
#endforeach
</select>
<input type="checkbox" id="enableSelect-{{$stud}}" onclick="getCheck({{$stud}});">
and this is my jquery
function getCheck(id){
var e = document.getElementById("sub1");
var sub1 = e.options[e.selectedIndex].value;
console.log(sub1);
if($('#enableSelect-' +id).is(':checked')) {
$('.costume-' +id).prop("disabled", false);
$('.costume-' +id).prop("required", true);
$('.visibility').show();
}else{
$('.costume-' +id).prop("disabled", true);
$('.costume-' +id).prop("required", false);
$('.visibility').hide();
}
}

Your JS doesn't correspond to the HTML, the selectors don't match up.
I would check form values and set the required like this :-
$('select').on('change', function() {
if($(this).val() != ""){
$('select').prop('required',false);
}
});
This would work with your HTML as by default the select value is ""
You would also need required="true" on the and your default option should be something like this -
<option value="" disabled selected>Select your option</option>
on the select elements by default.

create object from multiple selection option list and input

On click, user can dynamically add combo (select option + input field) into form with (city code and telephone number), need to retrieve in a object with the inputed values for these fields.
//Code that retreive the input values:
var number_el = document.getElementById('phone').getElementsByTagName('input')
var telefoneNumber = [].map.call(number_el, function(input) {
return {
'telefone': input.value
};
});
console.log(telefoneNumber);
<div id="phone">
<p>Telephone</p>
<select name="city_code" id="telephone_1" class="telephoneList">
<option value="1">212</option>
<option value="2">216</option>
<option value="3">215</option>
</select>
<input type="text" name="phone_number" id="phone_input1" value="555-222555"> </br>
<p>Telephone</p>
<select name="city_code" id="telephone_1" class="telephoneList">
<option value="1">212</option>
<option value="2">216</option>
<option value="3">215</option>
</select>
<input type="text" name="phone_number" id="phone_input2" value="555-666555">
</div>
The above code retreive the input telefone:values in object.
I need to loop throw the select options to get its values and add to the object as show below:
Element name can be used as property name for both telefone and city_code.
telephoneList: [
{
"telefone":555-222555,
**"city_code":1**
},
{
"telefone":555-666555,
**"city_code":2**
}
]

You can use the attribute previousElementSibling for getting the previous element which is a select.
This is assuming that the previous element is always the select element.
//Code that retreive the input values:
var number_el = document.getElementById('phone').getElementsByTagName('input')
var telefoneNumber = Array.from(number_el).map(function(input) {
var object = {
'telefone': input.value,
'city_code': input.previousElementSibling.options[input.previousElementSibling.selectedIndex].value
}
return object;
});
console.log(telefoneNumber);
<div id="phone"> <p>Telephone</p> <select name="city_code" id="telephone_1" class="telephoneList"> <option value="1">212</option> <option value="2">216</option> <option value="3">215</option> </select> <input type="text" name="phone_number" id="phone_input1" value="555-222555"> <br> <p>Telephone</p> <select name="city_code" id="telephone_1" class="telephoneList"> <option value="1">212</option> <option value="2">216</option> <option value="3">215</option> </select> <input type="text" name="phone_number" id="phone_input2" value="555-666555"> </div>

option selected base on a value javascript with chosen plugin

I am trying to select a option based on the input given by the user in my select with a chosen plugin. My code works when I remove the data-rel="chosen". This is my code.
function editUser () {
var tldArray = new Array();
$("select#extname > option").each(function(){
tldArray.push($(this).val());
});
for (index = 0;index < tldArray.length;index++) {
if (tldArray[index] == document.getElementById('extselect').value) {
$('#extname').val( $.trim( tldArray[index] ) );
}
}
}
this is my select:
<select id="extname" data-rel="chosen" class="input-small" data-placeholder="Ext. Name">
<option value=""></option>
<option value="SR">SR</option>
<option value="JR">JR</option>
<option value="3rd">3rd</option>
<option value="4th">4th</option>
<option value="5th">5th</option>
<option value="6th">6th</option>
<option value="7th">7th</option>
<option value="8th">8th</option>
<option value="9th">9th</option>
<option value="10th">10th</option>
</select>
and this is my input
<input class="input focused" id="extselect" style="margin-top:-15px" type="text" placeholder="First Name">
<button value='$key->id' class='btn btn-mini btn-info' href='#' onclick='editUser(this)'>
How can I make this work with a chosen plugin?

Changes made to a select initialized with chosen won't display in the html generated by the chosen plugin until you call
$('#extname').trigger('chosen:updated');

JavaScript Select within a Select

I have a drop down menu, with two options:
<select name="chs" value="" id = ""/>
<option value="">ICE Cream</option>
<option value="">Juice</option>
</select>
This is what I want to have: in the first page you see a select, with two option, if you choose ICE cream another select will appear with different flavors (chocolate, vanilla, etc), and the same for juice.
This is what I already have:
html:
<label>Choose Skin</label><br /><select name="na" value="" id = ""/>
<option value="">ICE Cream</option>
<option value="">Juice</option>
</select>
<select name="icecreamfla" value="" onchange="showSelect()" id = "framework"/>
<option id="jm">vanilla</option>
<option id = "wp">chocholate</option>
</select>
<input type="submit" name = "redirect" value="go" />
The JavaScript:
function showSelect()
{
var select = document.getElementById('skin');
if(select.value == "juice"){
alert('saeed khare!');
}
else{
var option = document.getElementById('icecreamfla');
option.style.display = 'inline';
}
}
option.style.display used to be 'none', then I changed it to inline.
if any one can help please do it.

Here is a small demo with the flavours <select> only appearing when Ice Cream is selected.
It should be easy to follow to implement this to display a different <select> if the user chooses Juice.
Edit: If you want the selected value you can use types.options[types.selectedIndex].text to get it using the variables in my demo.

Is this you want to do it .
<script language='javascript'>
function showSelect()
{
var select = document.getElementById('skin').value;
if(select == "ICE Cream"){
var str="<select name='icecreamfla' value='' id = 'icecreamfla'/>"
+"<option id='jm'>vanilla</option>"+
"<option id ='wp'>chocholate</option> </select>";
document.getElementById("flavour").innerHTML=str;
}
}
<label>Choose Skin</label><br /><select name="na" value="" id = "skin" onchange="showSelect()">
<option value="ICE Cream">ICE Cream</option>
<option value="Juice">Juice</option>
</select>
<div id="flavour"></div>
<input type="submit" name = "redirect" value="go" />