We Keep Coding

Data not showing in select dropdown after value is set

the foundation of my code is that I am taking data from ag-grid and showing that data into select drop-down (inside a popup) when "Edit" button is clicked.
But the data is not showing in the select drop-down.
When I click Edit, "YES" or "NO" should show as already selected in the drop-down based on the data I get from the grid. The code I used is mentioned below:-
<!-- Alter Part -->
<div class="form-group row">
<label for="alter_part" class="col-sm-3 col-form-label">Alter Part</label>
<div class="col-sm-9">
<select id="alter_part" class="form-control" onchange="alternatefunc();" required>
<option value="1">YES</option>
<option value="0">NO</option>
</select>
</div>
</div>
<!-- Test Type -->
<div class="form-group row">
<label for="test_type" class="col-sm-3 col-form-label">Select Test Type</label>
<div class="col-sm-9">
<select id="test_type" class="form-control" required>
<option value="1">YES</option>
<option value="0">NO</option>
</select>
</div>
</div>
function getInitialData(params)
{
//Setting value using grid data
document.getElementById('alter_part').value = params.node.data[params.columnApi.getAllGridColumns()[3].colId];
document.getElementById('test_type').value = params.node.data[params.columnApi.getAllGridColumns()[7].colId];
}
I have verified that the select drop-down stores the value from grid,
var a = document.getElementById('test_type').value;
variable "a" here returns the correct value of the grid row.

Multiple Values in Valvalue?

I am new in jquery and I got a very few knowledge I created an input field in which jquery grab a dropdown selected values if I put only one value in setting value field its working fine as I want to grab all var value in a single //Setting Value and also want only first two letters of the selected value: like if I choose dropdown value as Morning Class I want only "MO" and same for the rest variables as Section XI Class I am looking for only XI my code is given below:
Html Code
<form id="form1" method="post" enctype="multipart/form-data">
<div class="col-md-3">
<div class="form-group">
<select id="section_id" name="section_id" class="form-control" >
<option value="XI Class">XI Class</option>
<option value="XII Class">XII Class</option>
</select>
<div class="col-md-3">
<div class="form-group">
<select id="class_id" name="class_id" class="form-control" >
<option value="Morning Class">Morning Class</option>
<option value="Morning Class">Morning Class</option>
</select></div></div>
<div class="col-md-3">
<div class="form-group">
<select id="class_id" name="class_id" class="form-control" >
<option value="Morning Class">Morning Class</option>
<option value="Morning Class">Morning Class</option>
</select></div></div>
<div class="col-md-3">
<div class="form-group">
<input id="input" name="input" placeholder=""
type="text" class="form-control " value="" /></div></div>
</div>
</form>
jquery Code
$("#class_id,section_id").on("change",function(){
//Getting Value
var selValue = $("#class_id :selected").text();
var selValue1 = $("#section_id :selected").text();
//Setting Value
$("#input").val(selValue,selValue1);
});

Hide the form when clicked on a particular option of dropdown and show the form when clicked on a particular option of dropdown

I want to show a form when clicked on a particular option of a dropdown and hide the form when clicked on a particular option of a dropdown
This is my html code:
<div class="form-group" id="venue-select">
<select class="form-control venue-dropdown" id="" onchange="myFunction()">
<option value="none" id="#hide" ><b>Select Venue Type</b></option>
<option>Theme Restaurant</option>
<option>Blah restaurant</option>
<option>Flana Restaurant</option>
<option>Woops Restaurant</option>
</select>
</div>
<div class="row bgcolor show-form" style="display:none;">
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
<form>
<div class="form-group">
<label><strong>Venue Name</strong><sup class = "venue-imp">*</sup></label>
<input type="text" class="form-control input-lg" placeholder="Jhanqar Banquet Hall">
</div>
</form>
</div>
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
<form>
<div class="form-group">
<label><strong>Venue Price</strong><sup class = "venue-imp">*</sup></label>
<input type="text" class="form-control input-lg" placeholder="Jhanqar Banquet Hall">
</div>
</form>
</div>
</div>
it's working perfectly when i click on any venue in the dropdown but i want the form to hide when i click on select any venue
this is my javascript code:
/*show fom*/
function myFunction() {
$('.show-form').show();
// $('.show-form').hide();
}

Try to this
<select class="form-control venue-dropdown" id="" onchange="myFunction(this.value)">
<option value="Theme Restaurant 1">Theme Restaurant 1</option>
<option value="Theme Restaurant 2">Theme Restaurant 2</option>
</select>
<script>
function myFunction(select_value) {
if(select_value == 'Theme Restaurant 1')
{
$('.show-form').show();
}
}
</script>

add others value to select option

I'm trying to make option value with others , which if the user need to write other values input text will being shows to him to add what he want , otherwise he can add from the option select box , I have an issue with that which it add only the input field and not adding the value from the optin box , Can any one help me with that the project is with laravel framework
here's my form :
<div class="row">
<div class="col-md-12 unit">
<label class="label float-ar">من فضلك اختر هوايات الطفل</label>
<div class="select " id="admDivChecktop">
<select name="childHoppy" class="col-md-12 sel-has-p" id="getFname" onchange="admSelectCheck(this);">
<option value="none" selected disabled>اختر هوايات الطفل</option>
<option value="القرأه">القراه</option>
<option value="الرياضة">الرياضة </option>
<option value="السباحه">السباحه</option>
<option value="الرسم">الرسم </option>
<option id="admOption" value="0">others</option>
</select>
</div>
</div>
</div>
<div class="row" id="admDivCheck" style="display:none;">
<div class="col-md-12 unit" >
<label class="label">أَضف بيانات أخري لهواية طفلك</label>
<div class="input" >
<input type="text" class="col-md-12 bg-hover" name="childHoppy" >
<label class="icon-left" >
<i class="fa fa-user"></i>
</label>
</div>
</div>
</div>
<script>
function admSelectCheck(nameSelect)
{
if(nameSelect){
admOptionValue = document.getElementById("getFname").value;
alert(admOptionValue);
if(admOptionValue == 0){
document.getElementById("admDivCheck").style.display = "";
document.getElementById("admDivChecktop").style.display = "none";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
</script>

I would add another hidden input and store the value there.
If your select has changed, catch the change with javascript and update hidden's value. Same for the text input.
What do you think about this?
Pseudo code:
<input type="hidden" name="childHoppy" id="childHoppy">
<select name="select" id="select">
<option>...</option>
</select>
<input type="text" name="text" id="text">
<script>
$document.on('change', '#select, #text', function() {
$('#childHoppy').val($this.val());
});
</script>

Text box in select option for web app

I am building a web app that is used to select drugs and details associated with drugs. There are some sections that allow for options, but the 'other' option requires the input of text as opposed to selecting one of the other options. I am trying to add a text box after a 'other' option is selected.
Here is the entire code that I have been working on. I have tried using javascript and some jquery, but I am unable to get it to work. Any help would be great please.
<div class="form-group">
<label class="control-label col-sm-2">Route:</label>
<div class="col-xs-3">
<select id="Quantity" name="quantity" class="form-control" required="">
<option value="" selected="" disabled="">Please select A dosage...</option>
<option value="PO">PO</option>
<option value="IV">IV</option>
<option value="PR">PR</option>
<option value="Topically">Topically</option>
<option value="other">Other (please specify)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Frequency:</label>
<div class="col-xs-3">
<select id="Regime" name="regime" class="form-control" required="">
<option value="" selected="" disabled="">Please select A regime...</option>
<option value="Once A Day">Once A Day</option>
<option value="BD">BD</option>
<option value="TDS">TDS</option>
<option value="QDS">QDS</option>
<option value="Other">Other (please specify)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Date of Prescription:</label>
<div class="col-xs-3">
<input class="form-control" type="date" name="prescription" placeholder="(yyyy-mm-dd)" required>
</div>
</div>

Look please this jsfiddle example
$('textarea').hide();
$('#Quantity').change(function()
{
var o = $(this).find('option:selected').val();
console.log(o);
if(o=='other') $('textarea').show();
});
So here are some explanations :
$('textarea').hide(); // hide the textarea by default
$('#Quantity').change(function(){ }); // when the user select an option in the #quantity select tag
var o = $(this).find('option:selected').val(); // get the current value of the option selected
if(o=='other') $('textarea').show(); // if the variable o is equal to "other" then show the textarea