I have select box and when the options change it shows another select box and it works fine however I want to have radio button show instead of selectbox. Can someone help me out?
.sub{display:none;}
<script type="text/javascript">
var $sub = $('select.sub');
$('select').first().change(function () {
$sub.hide();
if (this.selectedIndex > 0)
$sub.eq(this.selectedIndex - 1).show();
}).change();
</script>
<select><--!main select box--!>
<option value="">select</option>
<option> one</option>
<option> two </option>
</select>
<select class="sub">
<option> one 1</option>
<option> one 2</option
</select>
<select class="sub">
<option> two 1</option>
<option> two 2</option>
</select>
This is what I need instead of the above two selectboxes....
<div class="sub">
<input type="radio">one 1
<input type="radio">one 2
</div>
<div class="sub">
<input type="radio">two 1
<input type="radio">two 2
</div>
If this something that u want?
<select>
<option value="">select</option>
<option value="sub1"> one</option>
<option value="sub2"> two </option>
</select>
<div class="sub sub1">
<input type="radio">one 1
<input type="radio">one 2
</div>
<div class="sub sub2">
<input type="radio">two 1
<input type="radio">two 2
</div>
$('.sub').hide();
$('select').on('change', function(){
$('.' + this.value).show();
});
Working demo
Related
list1 list2
pune pune
mumbai mumbai
lonavala lonavala
If I select pune in the first list, in the secound list pune will be hidden. I'm using codeignitor; it is dynamic drop down list.
You may use
$("#list2").val(...);
and
$("#list2").find("option:selected").remove();
together as :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#list1').on('change',function(){
var v_selected = $(this).val();
$("#list2").val(v_selected);
if ( v_selected == 'List1_0')
$("#list2").val('List2_0');
else $("#list2").find("option:selected").remove();
});
});
</script>
<label for="list1"> List1 </label>
<select id="list1">
<option value="List1_0" selected >Please Select ... </option>
<option value="Pune" >Pune</option>
<option value="Mumbai" >Mumbai</option>
<option value="Lonavala" >Lonavala</option>
</select>
<br>
<label for="list2"> List2 </label>
<select id="list2">
<option value="List2_0" selected >Please Select ... </option>
<option value="Pune" >Pune</option>
<option value="Mumbai" >Mumbai</option>
<option value="Lonavala" >Lonavala</option>
</select>
I am trying to count the number of VISIBLE selects (Which I've done in the alert in the Jquery) and also count the number of VISIBLE selects that have an option selected. If both numbers match then do some action.
Currently, when I change the first select and choose an option, it doesn't alert with a value. When I change the next select and choose an option it shows the count is 1 when it is meant to be 2. when I select the third select then it shows 3. However these numbers are all inaccurate. What is the cause of this?
<div id="secondPanelID">
<div class="form-group input-group">
<label for="gestationalAgeInWeeks">Gestational Age : </label>
<div>
<select id="gestationalAgeInWeeks" name="gestationalAgeInWeeks" class="form-control">
<option disabled selected value>SELECT</option>
<option value="0">0</option>
</select>
</div>
</div>
<div class="form-group input-group">
<label>days</label>
<div>
<select name=gestionalDays class="form-control">
<option disabled selected value>SELECT</option>
<option value="0">0 Days</option>
<option value="1">1 Day</option>
</select>
</div>
</div>
</div>
Added listeners to each of the selects
$("select[name=gestationalAgeInWeeks]").change(checkingColourSelectsGeneralData);
$("select[name=gestionalDays]").change(checkingColourSelectsGeneralData);
Jquery
var selectCounterInGeneral = 0;
function checkingColourSelectsGeneralData(){
alert($('#secondPanelID select:visible').length)
$('#secondPanelID select:visible').change(function () {
var o = $(this);
if (!o.hasClass('counted')) {
selectCounterInGeneral++;
o.addClass('counted');
}
alert("number of selects: "+selectCounterInGeneral);
});
}
Just check if all visible selects have value this way:
function countSelected(e) {
var toReturn = true;
$('select:visible').each(function(i) {
if( !$(this).val() ) {
toReturn = false;
};
});
console.log( toReturn );
};
$('select').on('change', countSelected);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option disabled selected value>--choose--</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select>
<option disabled selected value>--choose--</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select style="display: none;">
<option disabled selected value>--choose--</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
Also on JSFiddle.
I am currently developing an airline reservation using PHP(Codeigniter). Currently the fields/radio buttons that I have:
2 radio button
1) One way
2) Round Trip
2 dropdown list
1) From
2) To
and so on..
When the user trying to book, the user can't repeat the destination he inputted "from destination" into "to destination". Example: I have 3 destinations; 1) Country 1; 2) Country 2; 3) Country 3, then user tries to book. From: Country 1, To: Country1. The Country 1 in the "To:" should not be display because he already use it in the From Destination.
NOTE: The thing that I do first is, call all the available destinations in my controller then call it in my view using my foreach.
<div class="pure-u-1-1 fromto">
<div class="pure-u-1-1">
<label for="from" class="margin2px">From</label>
<!-- <input type="text" class="fromto"><br> -->
<select class="fromto" name="flight_from">
<?php foreach($flight as $a):?>
<option value ="<?= $a->flight_name?>" ><?= $a->flight_destination?></option>
<?php endforeach?>
</select>
</div>
<div class="pure-u-1-1">
<label for="to" class="tomargin">To</label>
<!-- <input type="text" class="fromto"><br> -->
<select class="fromto" name="flight_to">
<?php foreach($flight as $a):?>
<option value ="<?= $a->flight_name?>" ><?= $a->flight_destination?></option>
<?php endforeach?>
</select>
</div>
Question: How can I prevent it from repeating the country I selected in my "from destination" into "to destination"?
You may use jQuery:
$('select[name=flight_from]').on('change',function(){
$("select[name=flight_to]").find('option').show();
var from = $(this).find(":selected").val();
$("select[name=flight_to]").val('');
if ( from != "" ) {
$("select[name=flight_to]").find( 'option:contains("'+from+'")' ).hide();
}
})
<select name="flight_from">
<option value="">-- Please select depature --</option>
<option>Country 1</option>
<option>Country 2</option>
<option>Country 3</option>
</select>
<select name="flight_to">
<option value="">-- Please select destination --</option>
<option>Country 1</option>
<option>Country 2</option>
<option>Country 3</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have 3 selectbox on my page and onClick of close button I want to clear all the selectbox which are under the class .popup.
Below is my code to clear fields.
clearText: function() {
$('.popupBody input').val('');
$('.popupBody select').val('');
$('.popupForm').find('.errmsgActive').removeClass('errmsgActive');
$('.popupForm').find('.errmsg').html('');
}
For clearing all select boxes inside .popupBody class, I am using below code.
$('.popupBody select').val('');
For clearing selection made in select2 select box you can try following approach:
$('.popupBody select').each(function(){
//iterate over all the select boxes one by one
$(this).select2("val", ""); //clearing the selection made
});
try this, this will work for you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="popupBody">
<label>Select option one</label>
<select>
<option value="">-- select --</option>
<option>select1 value 1</option>
<option>select1 value 2</option>
<option>select1 value 3</option>
</select>
<br><br><br>
<label>Select option two</label>
<select>
<option value="">-- select --</option>
<option>select2 value 1</option>
<option>select2 value 2</option>
<option>select2 value 3</option>
</select>
<br><br><br>
<label>Select option Three</label>
<select>
<option value="">-- select --</option>
<option>Stackoverflow</option>
<option>is</option>
<option>awesome</option>
</select>
<br><br><br>
<input type="button" name="" value="CLEAR" id="closebutton">
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#closebutton").click(function(){
$("div.popupBody select").val("");
});
});
</script>
</body>
</html>
To reset a dropdown you need to select the default element usually the first one:
$('.popupBody select').find('option:first-child').attr('selected','selected');
to reset the value in select2 use
$('.popupBody select').select2("val", "");
Your code is looks good.. obviously $('.popupBody select').val(''); is clearing value of select dropdown under .popupBody.
BUT
Make sure, all select input must have option value=''.
See below code
$(".popupBody select").select2();
$("#clear").click(function(){
$('.popupBody select').val('-1').change();
})
#import "https://select2.github.io/dist/css/select2.min.css";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<div class="popupBody">
<select>
<option value="-1">Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select>
<option value="-1">Select</option>
<option value="A1">A1</option>
<option value="B1">B1</option>
<option value="C1">C1</option>
</select>
<select>
<option value="-1">Select</option>
<option value="A2">A2</option>
<option value="B2">B2</option>
<option value="C2">C2</option>
</select>
</div>
<button id="clear">Clear</button>
I'm trying to update the value of a select input when I change the value of another select input. I cannot get anything to happen on the page and want to make sure I don't have a syntax error or some other dumb thing in this code.
<div class="group">
<div class="inputs types">
<strong style="font-size:13px;">Category:</strong>
<select name="id" id="ctlJob">
<option value="1">Automotive</option>
<option value="2">Business 2 Business</option>
<option value="3">Computers</option>
<option value="4">Education</option>
<option value="5">Entertainment & The Arts</option>
<option value="6">Food & Dining</option>
<option value="7">Government & Community</option>
<option value="8">Health & Beauty</option>
<option value="9">Home & Garden</option>
<option value="10">Legal & Financial Services</option>
<option value="11">Professional Services</option>
<option value="12">Real Estate</option>
<option value="13">Recreation & Sports</option>
<option value="14">Retail Shopping</option>
<option value="15">Travel & Lodging</option>
</select>
<select name="type" id="ctlPerson"></select>
</div>
</div>
<script>
$(function() {
$("#ctlJob").change(function() {
//Get the current value of the select
var val = $(this).val();
$('#ctlPerson').html('<option value="123">ascd</option>');
});
});
</script>
Try using append instead:
$(function() {
$("#ctlJob").change(function() {
//Get the current value of the select
var val = $(this).val();
var ctl = $('#ctlPerson').append('<option value="123">'+val+'</option>')[0].options;
ctl.selectedIndex = ctl.length-1;
});
});
http://jsfiddle.net/J69q8/
I think you also need to set the 'selected' property. Add
$('#ctlPerson option[value="123"]').attr('selected', 'selected');
to the end of the script. You are currently adding the option to the select list, but are not changing the select list to show it.
<div id="test">
<select name="sel" id="sel">
<option name="1" id="1" value="1">Automotive</option>
<option name="2" id="1 value="2">Business 2 Business</option>
<option name="3" id="1 value="3">Computers</option>
</select>
<select name="sel2" id="sel2"></select>
</div>
<script>
$("#sel").change(function() {
var val = $(this).val();
$('#sel2').html('<option value="1">NEW</option>');
)};
</script>
this works fine for what you need to do.
it's something like what you have