I am doing to change 2nd select tag name by javascript.
this is my HTML
1st select
<select name="bank" id="bank" class="select" onchange="myFunction(event)">
<option value="Bank Account" a="required">Bank Account</option>
<option value="UPI" a="hidden">UPI</option>
</select>
2nd Select
<select name="bank1" class="select" id="bank1" required>
<option disabled selected>Choose Bank Name</option>
<option value="SBI">SBI</option>
<option value="PNB" >PNB</option>
</select>
this is my javascript
function myFunction(e) {
document.getElementById("bank1").name = e.target.a
but i want to change in 2nd select required to hidden
probably you are looking for setAttribute.
document.getElementById("bank1").required = false;
And for style mutation. As #Kokodoko had already written.
document.getElementById("bank1").classList.add("hidden")
Do you want to hide the second select box completely?
function myFunction(e) {
document.getElementById("bank1").classList.add("hidden")
}
CSS
#bank1.hidden {
display:none;
}
Related
Here's my code. Is it possible to empty the value of the first option using jquery/javascript ?
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
so it will become like that:
<option value="">Select category</option>
I already know that i can remove the whole first option by targeting its value
$("#select_1 option[value='0']").remove();
You can use plain javascript to get the first option of a select element using .options like so, which returns an indexed collection, so you can just use zero based index to grab the first option and set it's value property:
document.getElementById("select_1").options[0].value = '';
To target the first element of a collection use :first. Then you can use val('') to remove the value from it:
$('#select_1 option:first').val('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
<script>
$(document).ready(function (){
$('#btnremoveoption').click(function (){
$('#select_1 option:first').remove();
});
});
</script>
<body>
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
<input type="button" id="btnremoveoption" value="Click to Remove all Options" onclick="Remove_options()"/>
</body>
This Program will keep Removing first option when ever button will be click.
$(document).ready(function (){
$('#select_1 option:first').remove();
});
this will remove it onload of the page. without leaving the option blank it will be filled with the next option.
I have this drop-down list of ethnicity.
What I want is when I select clear ethnicity it should not appear in select box, and like box should be empty.
How can i do that?
<select
#ethnicity
[(ngModel)]="patient.Ethnicity"
[class.text-dimmed]="!patient.Ethnicity"
name="ethnicity"
id="ethnicity"
class="form-control input-underline input-lg ml-0">
<option [ngValue]="null" disabled> Select </option>
<option [ngValue]="null">Clear ethnicity</option>
<option value="Alaska-Native">Alaska Native</option>
<option value="American-Indian">American-Indian</option>
<option value="Asian">Asian</option>
<option value="African-Americans">Black or African American</option>
<option value="Hispanic">Hispanic or Latino</option>
<option value="Jewish-Ashkenazi">Jewish - Ashkenazi</option>
<option value="Jewish-Other">Jewish - Other</option>
<option value="Native-Hawaiians">Native Hawaiian or Other Pacific Islander </option>
<option value="Other">Other </option>
<option value="Unknown">Unknown </option>
<option value="White-Caucasian">White or Caucasian</option>
</select>
like when I select it, it appears like this
but what I want is,
here is my demo
clear ethnicity should show in dropdown but when i select it it should not show in select box like i shared screen shots
What should I do to solve this situation ?
Thank you.
You can handle change event of select tag like this.
onChange(value) {
if(value == 'Clear ethnicity'){
this.Ethnicity = '';
}
<select
#ethnicity
[(ngModel)]="Ethnicity"
[class.text-dimmed]="!Ethnicity"
name="ethnicity" (change)="onChange($event.target.value)"
id="ethnicity"
class="form-control input-underline input-lg ml-0">
Demo: https://stackblitz.com/edit/angular-clear-option-select
All you have to do is delete the value "Clear ethnicity" like I did below:
<option [ngValue]="null" [hidden]="clear.selected"></option>
I have 4 selects on a page and only the first one is visible. Also, the first select has basic prompt string: Choose person like this:
<select name="post[person_id]">
<option value="">Choose person</option>
<option value="1">David</option>
<option value="2">Sam</option>
<option value="3">Tobias</option>
</select>
Once user chooses some option from the first dropdown, the other 3 selects have to be displayed.
How to implement it?
Here is a simple jquery solution. The key is to use the .change event and hook it up to your dropdown(s).
HTML
<select id="controllerDD">
<option value="">Select...</option>
<option value="Show 1">Show 1</option>
<option value="Show 2">Show 2</option>
<option value="Show All">Show All</option>
</select>
<p>DD 1</p>
<select id="DD1" style="display:none">
<option value="blah">Select...</option>
<option value="blah">blah</option>
<option value="blah">blah</option>
<option value="blah">blah</option>
</select>
<p>DD 2</p>
<select id="DD2" style="display:none">
<option value="blah">Select...</option>
<option value="blah">blah</option>
<option value="blah">blah</option>
<option value="blah">blah</option>
</select>
JavaScript
$('#controllerDD').change(function (e) {
var selected = $(e.currentTarget).val();
$('#DD1').hide();
$('#DD2').hide();
switch (selected) {
case "Show 1":
$('#DD1').show();
break;
case "Show 2":
$('#DD2').show();
break;
case "Show All":
$('#DD1').show();
$('#DD2').show();
break;
default:
break;
}
})
You have to use onchange methods.
<select onchange="myFunction()">
<script>
function myFunction(){
// fetch new data for the next select.
//append the new options on next select.
// make select available or enabled
}
</script>
For the first select use the onchange to fetch (populate) the options of the next selects. And do the same for the following selects.
You can also fetch and make it available in the instance you finish to populate the select.
In case you are not using jQuery. You can append the option
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';
}
}
I am working on a Formstack form. I need to use Javascript to change the value of a dropdown box to whatever the value being typed into a text field is once a match is made.
<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value=""> </option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>
So as soon as someone types in CIPSmember into the text field, the dropdown should be selected with the same value. If there is no match, the dropdown has no selection.
I used the following jQuery on jsFiddle, but it is not working on Formstack:
$('#field35497729').keyup( function() {
$("#field35497839").val($('#field35497729').val());
}
);
Here is one Javascript method I am trying on jsFiddle that does not work:
document.getElementByID('field35497729').onkeyup = function() {
document.getElementById('field35497839').value = document.getElementByID('field35497729').value;
};
I checked here, here and maybe 10 other places but I can't get it to work. There are plenty of tutorials on how to get a text field to change when a dropdown selection change, but not nearly as many on the opposite.
misspelled ID in getElementById
missing end bracket on the jQuery version
simplified to use this and $(this)
I am however curious. Perhaps you want an autocomplete instead?
Here are your fixed versions
Plain JS version
window.onload=function() {
document.getElementById('field35497729').onkeyup = function() {
document.getElementById('field35497839').value = this.value;
}
}
<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value=""> </option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>
jQuery version
$(function() {
$('#field35497729').on("keyup",function() {
$("#field35497839").val($(this).val()); // or (this.value)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value=""> </option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>