select dropdown with diffrent output dropdown value
-- select an option --
Unifi
Streamyx
when select unifi it will show another dropdown for unifi package only
when select streamyx it will show another dropdown for streamyx package only
<div class="form-group" id="beb">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> Package List :
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select name="PACKAGE_ID_UNIFI" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);">
<option disabled selected value> -- select an option -- </option>
<?php
$result = mysqli_query($conn,"select * from unifi ORDER BY PACKAGE_NAME ASC");
while ($row=mysqli_fetch_assoc($result))
{?>
<option value="<?php echo $row["no"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group" id="bob">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> Package List :
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select name="PACKAGE_ID_STREAMYX" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);" >
<option disabled selected value> -- select an option -- </option>
<?php
$result = mysqli_query($conn,"select * from streamyx ORDER BY PACKAGE_NAME ASC");
while($row=mysqli_fetch_assoc($result))
{?>
<option value="<?php echo $row["PACKAGE_NAME"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
<?php
}
?>
</select>
</div>
</div>
this is the javascript to hide the dropdown based on what selected
<script> var a = document.getElementById('beb');
if ((value) == 'UNIFI')
{
a.style.display = '';
}
else if((value) == 'STREAMYX')
{
a.style.display = 'none';
}
var a = document.getElementById('bob');
if ((value) == 'UNIFI')
{
a.style.display = 'none';
}
else if((value) == 'STREAMYX')
{
a.style.display = '';
}
</script>
You can use jquery to select the first item (-- select an option --) in the selectbox.
You could do this with:
$('select[name="PACKAGE_ID_UNIFI"]').prop('selectedIndex',0);
and
$('select[name="PACKAGE_ID_STREAMYX"]').prop('selectedIndex',0);
I've added ID's to the select boxes so they are easyer to target in jquery:
$(function(){
$('#streamSelect').change(function(){
if( this.value === 'unifi'){
$('#unifi-contaioner').removeClass('hidden'); // show the unifi selectbox
$('#streamyx-contaioner').addClass('hidden'); // hide the streamyx selectbox
$('#streamyx').prop('selectedIndex',0); // reset the streamyx selectbox
}else{
$('#streamyx-contaioner').removeClass('hidden'); // show the streamyx selectbox
$('#unifi-contaioner').addClass('hidden'); // hide the unifi selectbox
$('#unifi').prop('selectedIndex',0); // reset the unifi selectbox
}
});
})
.hidden{
opacity: 0.2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="streamSelect">
<option value="unifi">unifi</option>
<option value="streamyx">streamyx</option>
</select>
</div>
<div id="unifi-contaioner">
<label for="unifi">Package List unifi:</label>
<select id="unifi" name="PACKAGE_ID_UNIFI">
<option disabled selected value> -- select an option -- </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div id="streamyx-contaioner" class="hidden">
<label for="streamyx">Package List streamyx:</label>
<select id="streamyx" name="PACKAGE_ID_STREAMYX" >
<option disabled selected value> -- select an option -- </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
You can detect user selection using the change event. You are using pure hs but also tagged jQuery. I will give the example in jQuery as that's what you should be using if you already have both on the page.
Your example also has several issues. Use seperate variables for different elements. The hiding doesn't make sense to me. I will do the example for beb anyway but I think you should rereview your question.
Instead of changing the css it would be cleaner to have a selected class in css.
var $beb = $('#beb');
var $bob = $('#bob');
$beb.on('change', function (e) {
$beb.toggleClass('selected');
});
function
Related
This question already has answers here:
dynamically show and hide fields based on select box selection for loop
(4 answers)
Closed 12 months ago.
I would like to hide input field based on dropdown value. So two values are auto populated from database stone1 and stone 2
so if stone1 is pupated I want karat to be hidden and if stone 2 then carat and if any more values
populated both should be hidden
<label for="form" class="control-label">=Service</label>
<select id="form1" class="custom-select custom-select-sm select2" >
<option selected="" disabled>Select services First</option>
<?php
?>
<!-- <option value="<?php echo $row['id'] ?>" ><?php echo $name ?></option> -->
<?php endwhile; ?>
<div class="col-md-2">
<div class="form-group ctd" data-cid="ctd">
<label for="ctd">stone1</label>
<select class="form-control" id="ctd" name="ctd">
<option>24</option>
<option>22</option>
<option>20</option>
<option>18</option>
<option>16</option>
<option>14</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group ctg" data-cid="ctg">
<label for="ctg">stone2</label>
<select class="form-control" id="ctg" name="ctg">
<option>24</option>
<option>22</option>
<option>20</option>
<option>18</option>
<option>16</option>
<option>14</option>
</select>
</div>
</div>
So two values are auto-populated from database stone1 and stone 2 so if stone1 is populated I want karat to be hidden and if stone 2 then carat and if any more values populated both should be hidden
I tried this code but it hides only one and does not work at all
<script>
var form1 = jQuery('#form1');
var select = this.value;
form_id.change(function () {
if ($(this).val() == 'stone1') {
$('.ctd').show();
} else {
$('.ctg').hide();
}
});
</script>
(function ($) {
$(function () {
var form1 = jQuery('#form1');
var select = this.value;
$('#form1').change(function(){
if( $(this).val()==="1" ){
$("#ctd").show()
$("#ctg").hide()
$('label[for="ctg"]').hide();
$('label[for="ctd"]').show();
} else {
$("#ctg").show()
$("#ctd").hide()
$('label[for="ctd"]').hide();
$('label[for="ctg"]').show();
}
});
$('#form1').trigger("change");
});
}(jQuery));
I am a newbie and I have this project where the user should have the option of custom input if the listed options are not in dropdown.
HTML
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
</div>
PHP
if(isset($_POST["pageSelector"]))
{
$result = $_POST['pageSelector'];
if($result == "")
{
echo "<script>alert('Please select the Page')</script>";
}
$result_explode = explode('|', $result);
$width_page = $result_explode[0];
$height_page = $result_explode[1];
// Converting the string variables to integer
$width_plate=(double)$width_plate;
$height_plate=(double)$height_plate;
$width_page=(double)$width_page;
$height_page=(double)$height_page;
// To calculate the number of pages that can be print with one selected plate
$calculated_width = $width_plate/$width_page;
$calculated_height = $height_plate/$height_page;
$print_include = (int)$calculated_height*(int)$calculated_width;
echo "<div class='h1'>Number of Prints in one plate ".$print_include." prints</div> ";
}
I would like if the user selects the custom option then a input text should appear on the screen.
If user selected a custom option then you can give him an input.
let selectEl = document.getElementById('select-list');
selectEl.addEventListener('change', (e) => {
if (e.target.value == 'custom') {
document.getElementById('txt-custom').style.display = 'block';
} else {
document.getElementById('txt-custom').style.display = 'none';
}
});
#txt-custom {
display: none;
}
<select id="select-list">
<option value="">Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="custom">Custom</option>
</select>
<input type="text" id="txt-custom" name="custom-value" />
var pageSelector = document.getElementById('pageSelector');
var customInput = document.getElementById('customInput');
pageSelector.addEventListener('change', function(){
if(this.value == "custom") {
customInput.classList.remove('hide');
} else {
customInput.classList.add('hide');
}
})
.hide {
width: 0;
height: 0;
opacity: 0;
}
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3 page" id="pageSelector">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<input type="text" class="hide" placeholder="Custom Selector" name="custom" id="customInput">
</div>
Demo Code :
First you should have input with style="display:none" and with jQuery
jQuery(document).ready(function() {
jQuery("#selectId").change(function() {
if (jQuery(this).val() === 'custom'){
jQuery('input[name=other_input]').show();
} else {
jQuery('input[name=other_input]').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select name = 'pageSelector' class="col-sm-3" id="selectId" >
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<br><br><br>
<input type="text" name="other_input" style="display:none" />
Angular Version
Angular CLI: 13.0.3
Node: 16.15.0
Package Manager: npm 8.5.5
In .html File
**<div class="col-md-6">
<label class="form-label">Attendence Type</label>
<select (change)="type($event)" class="form-select" aria-label="Default select example" >
<option selected value="P">Present</option>
<option value="A">Absent</option>
<option value="PL">Paid Leave</option>
<option value="UL">Unpaid Leave</option>
</select>
</div>**
I want to Show this input after select paid leave
**<div *ngIf="plFlag" class="col-md-6">
<label class="form-label">Leave Type</label>
<select class="form-select" aria-label="Default select example">
<option selected disabled>Leave Type</option>
<option value="CL">Causel Leave</option>
<option value="SL">Seek Leave</option>
</select>
</div>**
and in .ts File
**type(event: any) {
console.log(event.target.value);
if (event.target.value == "PL") {
this.plFlag = true;
}
else {
this.plFlag = false;
}
}**
I'm getting a set of user roles from the database using PHP and they are put in a <select> tag's <option>s as follows:
<div class="col-md-3">
<select name="role" id="user_role" class="form-control" onkeyup="clearMsg('roleerr')" onchange="getRole()"/>
<option value="">Select a Role</option>
<?php while($rowrole = $resultrole->fetch(PDO::FETCH_BOTH)) { ?>
<option value="<?php echo $rowrole ['role_id']; ?>">
<?php echo $rowrole ['role_name']; ?>
</option>
<?php } ?>
</select>
<span id="roleerr" class="error">*</span>
</div>
And I want to get the selected value of the dropdown 'onchange' and for that getRole() javascript function is written. How to get this done?
When the element changes, the value of the dropdown will be set to the value attributed to the selected option. So you would just define your javascript function and have it fetch the value of the dropdown:
function getRole(){
var finalVal = document.getElementById("user_role").value;
// And then here you can do whatever you want with the information
}
You can assign value in paramater in onchange()
this should work below
function getRole(value) {
if(value != "")
alert(value)
}
<div class="col-md-3">
<select name="role" id="user_role" class="form-control" onchange="getRole(this.value)"/>
<option value="">Select a Role</option>
<option value="23">select 23</option>
<option value="24">select 24</option>
<option value="25">select 25</option>
</select>
<span id="roleerr" class="error">*</span>
</div>
You could try event of onchange.
onchange="getRole(event)"
Javascript.
function getRole(event) {
var selectElement = event.target;
var value = selectElement.value;
alert(value);
}
I tested it with hard data.
function getRole(event) {
var selectElement = event.target;
var value = selectElement.value;
alert(value);
}
<div class="col-md-3">
<select name="role" id="user_role" class="form-control" onchange="getRole(event)"/>
<option value="">Select a Role</option>
<option value="1">admin</option>
<option value="2">user</option>
<option value="3">support</option>
</select>
<span id="roleerr" class="error">*</span>
</div>
I'm trying to create a form with several select and the user should rank these selects from 1-8. However, I'm having some trouble hiding/removing/disabling the select option.
Here's my form
this is just the first four of the 8 selects to be ranked
<label>Spirituality</label>\
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
<label>School</label>
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
<label>Family</label>
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
<label>Friends</label>
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
This is what I got so far for my script
$(document).ready(function () {
$("#ranks1").click(function () {
$('#ranks1 option').prop('disabled', true);
});
});
And I did this for the CSS. For the disabled option
select option[disabled] {
display: none !important;
}
More background on what the form looks like.
I think you are wanting the change event, not the click event.
Please consider the following example which disables the selected option on change.
HTML:
<select id="selectlist">
<option value="0">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Javascript:
$('#selectlist').on('change', function() {
var selectedVal = $(this).find(":selected").val();
if (selectedVal != 0) {
// disable selected value
var selectedOption = $(this).find('option[value=' + selectedVal + ']');
selectedOption.attr('disabled', 'disabled');
}
});
JSFiddle: https://jsfiddle.net/tp9urjkb/
I have a multi-select dropdown and external div that post the number of selections. When I save the document as XML a window opens with an option to go back (I am using onclick="history.go(-1);").
Everything works except that the number of selection is = 0 even if the input has some elements selected.
Thanks.
java script code
$("#airlaine").change(function () {
var count = $(".k-multiselect-wrap li").length;
//console.log(count);
$('#displaycount').text(count);
});
html code
<div class="col-md-4 block">
<div class="iconqsai navy">
<p class="icontitle">QSAI</p>
<h4 id="displaycount" class="displaycount" name="aircount" value=""><?php if ($airlainecount != ""){echo $airlainecount;} else {echo "0";} ?></h4>
</div>
<div class="grayArea airline">
<div class="PanelMultiSelect"></div>
<select id="airlaine" name="airlines[]" multiple="multiple" class="numairline">
<option value="AA" <?php if (in_array("AA", $airline)) {echo "selected";}?> >AC</option>
<option value="AB" <?php if (in_array("AB", $airline)) {echo "selected";}?> >AF</option>
<option value="AC" <?php if (in_array("AC", $airline)) {echo "selected";}?> >ANA</option>
<option value="AD" <?php if (in_array("AD", $airline)) {echo "selected";}?> >EIL</option>
</select>
</div>
</div>
do you want to count list of .k-multiselect-wrap li or #airlaine selection?
for #airlaine selection:
$("#airlaine").change(function () {
var count = $("#airlaine option:selected").length;
$('#displaycount').text(count);
});