We Keep Coding

Show/hide div and clear filed value when change

I have some div that will show depending on the select value. Suppose there are two input fields name 'Apartment and Bechelor' If I select 'Apartment' some div and select field will show related to the apartment. The problem I am facing is, I can't clear the field value when selecting another. Like, after selecting 'Apartment', I will select Bachelor. Now it should be clear the value of the field which was under the apartment so that If I again select 'Apartment', I will get default values or clean fields.
<div id="residential" >
<input type="radio" value="apartment" id="type_apartment" name="type" >
<label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
<input type="radio" value="bachelor" id="type_bachelor" name="type">
<label for="type_bachelor" class="radio-inline"> Bechelor </label>
</div>
<!-- show this when apartment select -->
<div class="form-group " id="tenant-flat">
<select id="tenant-type" class="form-control" name="tenant">
<option value="">Anyone</option>
<option value="family">Family</option>
<option value="bechelor" >Bechelor</option>
</select>
</div>
<div class="form-group " id="flat-type">
<div class="col-sm-12">
<select id="" class="form-control" name="flat-type">
<option value="">Select Flat Type</option>
<option value="sublet" >Sublet</option>
<option value="full-flat" >Full Flat</option>
</select>
</div>
</div>
<!-- show this when bechelor select -->
<div class="form-group " id="r-type">
<div class="col-sm-12">
<select id="room" class="form-control" name="room_type">
<option value="">Select Room Type</option>
<option value="seat">Seat</option>
<option value="room" >Room</option>
</select>
</div>
</div>
<div class="form-group " id="tenant">
<div class="col-sm-12">
<select id="" class="form-control" name="tenant">
<option value="">Select Member</option>
<option value="family" >Family</option>
<option value="student" >Student</option>
<option value="job-holder" >Job Holder</option>
</select>
</div>
</div>
<script>
$(document).ready(function(){
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-flat').hide();
$('#flat-type').hide();
$('.pretty input[type="radio"]').click(function(){
if($(this).attr('value') == 'apartment'){
$('#tenant-flat').show();
}
else{
$('#flat-type').hide();
}
});
var showDiv = document.getElementById("tenant-type");
showDiv.onchange = function(){
var hiddenDiv = document.getElementById("flat-type");
hiddenDiv.style.display = (this.value == "family") ? "block":"none";
var genderDiv = document.getElementById("gender");
genderDiv.style.display = (this.value == "bechelor") ? "block":"none";
};
$('.pretty input[type="radio"]').click(function(){
if($(this).attr('value') == 'bachelor' || $(this).attr('value') == 'sublet' || $(this).attr('value') == 'hostel' ){
$('#r-type').show();
$('#tenant').show();
$('#tenant-type').hide();
}
else{
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-type').show();
}
});
});
</script>

to reset the dropdown options you can set the value of the select elements selectIndex property to 0 with this line:
$('.form-control').prop('selectedIndex', 0);
and in your code:
$(document).ready(function(){
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-flat').hide();
$('#flat-type').hide();
$('#residential input[type="radio"]').click(function(){
if($(this).attr('value') == 'apartment'){
$('#tenant-flat').show();
$('#flat-type').show();
$('#r-type').hide();
$('#tenant').hide();
}
else{
$('#r-type').show();
$('#tenant').show();
$('#flat-type').hide();
$('#tenant-flat').hide();
}
$('.form-control').prop('selectedIndex', 0);
});
$('#tenent-type').on('change', function() {
if($('#flat-type').val =='family') {
$('#flat-type').show();
} else {
$('#flat-type').hide();
}
if($('#gender').val =='bechelor') {
$('#gender').show();
} else {
$('#gender').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="residential" >
<input type="radio" value="apartment" id="type_apartment" name="type" >
<label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
<input type="radio" value="bachelor" id="type_bachelor" name="type">
<label for="type_bachelor" class="radio-inline"> Bechelor </label>
</div>
<!-- show this when apartment select -->
<div class="form-group " id="tenant-flat">
<select id="tenant-type" class="form-control" name="tenant">
<option value="">Anyone</option>
<option value="family">Family</option>
<option value="bechelor" >Bechelor</option>
</select>
</div>
<div class="form-group " id="flat-type">
<div class="col-sm-12">
<select id="" class="form-control" name="flat-type">
<option value="">Select Flat Type</option>
<option value="sublet" >Sublet</option>
<option value="full-flat" >Full Flat</option>
</select>
</div>
</div>
<!-- show this when bechelor select -->
<div class="form-group " id="r-type">
<div class="col-sm-12">
<select id="room" class="form-control" name="room_type">
<option value="">Select Room Type</option>
<option value="seat">Seat</option>
<option value="room" >Room</option>
</select>
</div>
</div>
<div class="form-group " id="tenant">
<div class="col-sm-12">
<select id="" class="form-control" name="tenant">
<option value="">Select Member</option>
<option value="family" >Family</option>
<option value="student" >Student</option>
<option value="job-holder" >Job Holder</option>
</select>
</div>
</div>

javascript cicle for duplicated values with select2

Hello guys i'm struggling with this problem.
I have html select with options and a input field to receive the values of the selected options.
So i have a script with FOR to get the options selected, in that input field.
The issue is that in the FOR cicle it writtes repeated values.
In the link posted you will see the problem.
This is the website for testing want i have
This is my code.
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
allowClear: true
});
function getSelectedOptions(sel) {
var opts = [],
opt;
var len = sel.options.length;
var input = document.getElementById("inputId1");
for (var i = 0; i < len; i++) {
opt = sel.options[i];
if (opt.selected) {
input.value += opt.value + ",";
//alert(opt.value);
}
}
//return opts;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<div class="container">
<div class="row space-top">
<div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<select id="selectedOptions" class="js-example-basic-multiple" name="colaboradores[]" multiple="multiple" style="width:100% !important;" onchange="getSelectedOptions(this)">
<option value="U1">User 1</option>
<option value="U2">User 2</option>
<option value="U3">User 3</option>
<option value="G1">Grupo 1</option>
<option value="G2">Grupo 2</option>
<option value="G3">Grupo 3</option>
</select>
</div>
</div>
<div class="row space-top">
<div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label for="inputId1">Valores recebidos do select 2</label>
<input type="text" class="form-control" id="inputId1" aria-describedby="peqDesc">
<small id="peqDesc" class="form-text text-muted">Estas são as variáveis que recebo do select 2</small>
</div>
</div>
</div>
</div>

You need to empty the input with input.value = '' before the for loop before rewriting the values :
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
function getSelectedOptions(sel) {
var opts = [],
opt;
var len = sel.options.length;
var input = document.getElementById("inputId1");
input.value = ''
for (var i = 0; i < len; i++) {
opt = sel.options[i];
if (opt.selected) {
input.value += opt.value + ",";
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<div class="container">
<div class="row space-top">
<div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<select id="selectedOptions" class="js-example-basic-multiple" name="colaboradores[]" multiple="multiple" style="width:100% !important;" onchange="getSelectedOptions(this)">
<option value="U1">User 1</option>
<option value="U2">User 2</option>
<option value="U3">User 3</option>
<option value="G1">Grupo 1</option>
<option value="G2">Grupo 2</option>
<option value="G3">Grupo 3</option>
</select>
</div>
</div>
<div class="row space-top">
<div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label for="inputId1">Valores recebidos do select 2</label>
<input type="text" class="form-control" id="inputId1" aria-describedby="peqDesc">
<small id="peqDesc" class="form-text text-muted">Estas são as variáveis que recebo do select 2</small>
</div>
</div>
</div>
</div>

Select options on two different select box matching those of two different array values jquery

I am trying to generate HTML by joining content from two separate arrays of equal size. For each index in the arrays a pair of selects should be created. The first select would have elements from the first array and the second would have elements from the second array. In both selects, the current element should be selected.
I can create the first set of selects as demonstrated below, but I cannot figure out how to create the second set of selects.
var myArryNames = [
"John",
"jennifer",
"Angel"
];
var myArryValues = [
"Hello World",
"Javascript",
"Jquery"
];
$('#bookForm').on('click', '.mynewButton', function() {
$(this).addClass('hide');
$('#bookTemplate-1').removeClass('hide');
for (var j = 1; j < myArryValues.length; j++) {
var thisRow = $('.dropdown').last(".dropdown");
var newid = parseInt(thisRow.attr('divid')) + 1;
newRow = thisRow.clone(true).insertAfter(thisRow).
find('select').each(function() {
$(this).attr('name', 'myDropdown[' + (newid - 1) + ']');
}).end().
find('option[value="' + myArryValues[j] + '"]').each(function() {
$(this).attr('selected', 'selected');
}).end();
thisRow.next('.dropdown').attr("divid", newid).attr("id", "bookTemplate-" + newid);
//$('select[id="bookTemplate-'+newid+'"]').val(myArryValues[j]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
<div id="bookForm" class="form-horizontal">
<div class="form-group">
<div class="col-md-12 button-div">
<button type="button" class="mynewButton">Add New</button>
</div>
</div>
<div class="form-group dropdown hide" id="bookTemplate-1" divid="1">
<div class="field-row">
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown[0]">
<option value="Hello World">Hello World</option>
<option value="Javascript">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames[0]">
<option value="John">John</option>
<option value="Jennifer">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
</div>
</div>
</div>
HTML OUTPUT SHOULD LOOK LIKE BELOW
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown">
<option value="Hello World" selected="selected">Hello World</option>
<option value="Javascript">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames">
<option value="John" selected="selected">John</option>
<option value="Jennifer">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown">
<option value="Hello World">Hello World</option>
<option value="Javascript" selected="selected">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames">
<option value="John">John</option>
<option value="Jennifer" selected="selected">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown">
<option value="Hello World">Hello World</option>
<option value="Javascript" >Javascript</option>
<option value="Jquery" selected="selected">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames">
<option value="John">John</option>
<option value="Jennifer" >Jennifer</option>
<option value="Angel" selected="selected">Angel</option>
</select>
</div>

The code below is a modification to your code that I believe does what is wanted by using the "nth-child" selector in jQuery.
Added code to do this by value instead.
var myArryNames = [
"John",
"Jennifer",
"Angel"
];
var myArryValues = [
"Hello World",
"Javascript",
"Jquery"
];
$('#bookForm').on('click', '.mynewButton', function() {
$(this).addClass('hide');
$('#bookTemplate-1').removeClass('hide');
var thisRow = $('.dropdown').last(".dropdown");
// Copy the two new rows
for (var j = 0; j < myArryValues.length; j++) {
var row;
// If j is non-zero, we need a new row
if (j) {
var newid = parseInt(thisRow.attr('divid')) + 1;
row = thisRow.clone(true).insertAfter(thisRow);
row.find('.myDropdown').attr('name', 'myDropdown[' + (newid - 1) + ']');
}
else {
row = thisRow;
}
// Alternate 1: select the appropriate options by position. This find will return elements from both divs, but since we don't care what the data is, just the position it works correctly
//row.find('option:nth-child('+(j+1)+')').attr('selected', 'selected');
// Alternate 2: Select the appropriate options by setting the value on the select itself
//row.find('.myDropdown').val(myArryValues[j]);
//row.find('.myNames').val(myArryNames[j]);
// Alternate 3: Manually modify the "selected" attribute of the appropriate options.
row.find('.myDropdown option[value="'+myArryValues[j]+'"]').attr('selected', 'selected');
row.find('.myNames option[value="'+myArryNames[j]+'"]').attr('selected', 'selected');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
<div id="bookForm" class="form-horizontal">
<div class="form-group">
<div class="col-md-12 button-div">
<button type="button" class="mynewButton">Add New</button>
</div>
</div>
<div class="form-group dropdown hide" id="bookTemplate-1" divid="1">
<div class="field-row">
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown[0]">
<option value="Hello World">Hello World</option>
<option value="Javascript">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames[0]">
<option value="John">John</option>
<option value="Jennifer">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
</div>
</div>
</div>

Dropdown that has an option to input a field

I'm trying to include in the option, that if the user chooses/clicks the Other please specify option, he gets an option to give input. The characters thus input will instantly show relevant nationalities in a dropdown bar.
For a javascript function based solution for this, how can I make a call to that function in my html code or in dropdown. Thanks! :D
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" required>
<option></option>
<option value="" disabled selected>Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
</div>

Check the below code
var code = $('#code'); //input field
code.hide(); //initially hide
$("#status").on('change', function() {
var selected_option = $('#status option:selected').eq(0);
if (selected_option.val() == 'other') {
code.show();
code.val(''); //empty the field every-time selecting the option
console.log(selected_option.val());
} else {
code.hide();
}
console.log(selected_option.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" id="status" required>
<option></option>
<option value="" disabled selected>Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<input type="text" name="code" id="code" />
</div>
Below is the full implementation
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Nationality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" id="status" required="required">
<option></option>
<option value="" disabled="disabled" selected="selected">Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<input type="text" name="code" id="code">
</div>
<script>
var code = $('#code'); //input field
code.hide(); //initially hide
$("#status").on('change', function() {
var selected_option = $('#status option:selected').eq(0);
if (selected_option.val() == 'other') {
code.show();
code.val(''); //empty the field every-time selecting the option
console.log(selected_option.val());
} else {
code.hide();
}
console.log(selected_option.val());
});
</script>
</body>
</html>

Try this:
You need to have a listener for your select and take the action as per the selected value..
var inputLabel = $('#inputLabel');
var onOptionChange = function() {
if (this.value == 'other') {
inputLabel.fadeIn(100);
} else {
inputLabel.fadeOut(100);
}
};
$('#status').on('change', onOptionChange);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
<label for="status" class="control-label col-xs-4">Nationality</label>
<select name="status" id="status" required>
<option value="" disabled selected>Select your Nationality</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<label for="input" id="inputLabel" style="display: none">Other:
<input type="text" id="input">
</label>
</div>

How to Show/Hide Div on SelectedIndex in Bootstrap 3?

I have this code:
<div class="form-group">
<label for="slDisThrough" class="col-sm-1 control-label">Distributed Through</label>
<div class="col-sm-11">
<select name="slDisThrough" id="slDisThrough" class="form-control">
<option value="0">-Select-</option>
<option value="1">Agent</option>
<option value="2">Retail</option>
</select>
</div>
</div>
<div id="slAgentID" class="hide">
<div class="form-group">
<label for="slAgent" class="col-sm-1 control-label">Agent</label>
<div class="col-sm-11">
<select name="slAgent" class="form-control">
<option value="0">-Select-</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
</div>
</div>
</div>
<div id="slRetailID" class="hide">
<div class="form-group">
<label for="slRetail" class="col-sm-1 control-label">Retail</label>
<div class="col-sm-11">
<select name="slRetail" class="form-control">
<option value="0">-Select-</option>
<option value="1">Hide</option>
<option value="2">Show</option>
</select>
</div>
</div>
</div>
Check this Fiddle
if(document.getElementById("slDisThrough").selectedIndex == 1) {
document.getElementById("slAgentID").style.display = ""; }
else { document.getElementById("slAgentID").style.display = "none"; }
if(document.getElementById("slDisThrough").selectedIndex == 2) {
document.getElementById("slRetail").style.display = ""; }
else { document.getElementById("slRetail").style.display = "none"; }
I need to Show/Hide the DIVs on Selected Value, I was previously using it with JavaScript, but stuck with Bootstrap.

Since you load jQuery, better use it like this:
$('#slDisThrough').on('change', function(){
if ($(this).val() == 1 ) {
$('#slAgentID').removeClass('hide');
$('#slRetailID').addClass('hide');
}
if ($(this).val() == 2 ) {
$('#slAgentID').addClass('hide');
$('#slRetailID').removeClass('hide');
}
})
Jsfiddle here