My question is I have three select boxes and user select first select box's option than select second select box's option and finally the third select box's options will load by user selection. It works but when user select the third select box's option I want to display a text but It doesn't work here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script></script>
<script type="text/javascript">
var zero="0,00";
var one="0,01";
$(document).ready(function() {
$('#main').on('change', '.select-box', function() {
if ($(".select-box option[value='1']").prop('selected') && $(".select-box option[value='1986']").prop('selected')) {
$('#street').html("<option value='2'>test</option><option value='3'>test2</option>");
}
if ($(".select-box option[value='1']").prop('selected') && $(".select-box option[value='1986']").prop('selected') && $(".select-box option[value='3']").prop('selected')) {
document.getElementById("demo3").innerHTML=""+zero;
}
});
});
</script>
<script type="text/javascript">
var x="",i;
for(i=1986;i<2013;i++)
{
x=x + "<option value='"+i+"'> " + i + "</option>";
}
$(document).ready(function() {
document.getElementById("forloop").innerHTML="<select class='select-box'><option>Empty/option>"+x+"</select>";
});
</script>
</head>
<body>
<p id="forloop"></p>
<div id="main">
<select class="select-box">
<option value="1">Hello</option>
</select>
<p></p>
<select class="select-box" id="street">
<option>Empty<option>
</select>
</div>
<p id="demo3">
</body>
</html>
You have multiple HTML syntax errors in your string concatenation. You're already using jQuery; for sanity's sake (yours and ours) stop constructing HTML with strings.
var selectBox = $('<select>');
$('<option>')
.text('Empty')
.appendTo(selectBox);
for (var i = 1986; i < 2013; i++) {
$('<option>')
.text(i)
.val(i)
.appendTo(selectBox);
}
selectBox.appendTo($('#forloop'));
Related
I'm trying to automatically hide divs in JavaScript using the below code, such that they can only be displayed/hidden upon clicking a select option:
//hiding the divs
$(document).ready(function(){
function hide(){
$(".atm").hide();
$(".bank").hide();
}
hide();
});
For reasons unknown to me, the code does not work(the divs are still not hidden). Below is the rest of the code (it works properly, only the code above isn't hidding divs)
//here's my html code for div
<div class="atm">ATM</div>
<div class="bank">Bank</div>
//here's my select code
<select name="type" id="document-type" onchange="showOptions(this)">
<option value="ATM">ATM</option>
<option value="Bank">Bank</option>
</select>
//and here's my javascript code for displaying the hidden divs
function showOptions(s) {
var val = s.options[s.selectedIndex].value;
if(val === "ATM"){
hide();
$(".atm").slideDown(400);
}else
if(val === "Bank"){
hide();
$(".bank").slideDown(400);
}
};
Anywhere I'm going/doing wrong?
Bind a change event to your select
$(document).ready(function(){
function hide(){
$(".atm").toggle();
$(".bank").toggle();
}
$('select').on('change',hide).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="atm">atm</div>
<div class="bank">bank</div>
<select>
<option>select</option>
<option>select</option>
</select>
Check this answer here
$(document).ready(function(){
$(".atm").hide();
$(".bank").hide();
$('select').on('change',function(){
if($('select').val()=='atm'){
$('.atm').show();
$('.bank').hide();
}
else if($('select').val()=='bank'){
$('.bank').show();
$('.atm').hide();
}
});
});
<html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script></head>
<body>
<select><option value="atm">ATM</option><option value="bank">Bank</option></select>
<div class="atm">ATM</div>
<div class="bank">BANK</div>
$(document).ready(function(){
$(".atm").hide();
$(".bank").hide();
$('select').change(function(){
$(".atm").toggle();
$(".bank").toggle();
}).
});
Try this. This will hide the classess on page load and then after changing the select box it will show. toggle() function is used to hide and show the elements.
Update to unresolved question -
Copy the following code into a text.html file and run it a browser and let us know the result:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function hide()
{
$('.atm').hide();
$('.bank').hide();
}
//and here's my javascript code for displaying the hidden divs
function showOptions(s) {
var val = s.options[s.selectedIndex].value;
if(val === "ATM"){
hide();
$(".atm").slideDown(400);
}else
if(val === "Bank"){
hide();
$(".bank").slideDown(400);
}
};
</script>
</head>
<body>
//here's my html code for div
<div class="atm">ATM</div>
<div class="bank">Bank</div>
//here's my select code
<select name="type" id="document-type" onchange="showOptions(this)">
<option value="ATM">ATM</option>
<option value="Bank">Bank</option>
</select>
</body>
</html>
Please see update at end according to question's update:
The js looks fine to me it works in example below - may be your html:
(Do your div's in html have class='atm' & class='bank' ?)
$(document).ready(function ()
{
function hide ()
{
$(".atm") .hide();
$(".bank").hide();
$('.btnHideShow').text('Show');
}
function show ()
{
$(".atm") .show();
$(".bank").show();
$('.btnHideShow').text('Hide');
}
$('.btnHideShow').click(function ()
{
if($('.atm').is(':hidden'))
{
show();
}
else
{
hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='atm'>Div ATM</div>
<div class='bank'>Div Bank</div>
<button class="btnHideShow">Hide</button>
Using select:
$(document).ready(function ()
{
function hide ()
{
$(".atm") .hide();
$(".bank").hide();
$('.btnHideShow').text('Show');
}
function show ()
{
$(".atm") .show();
$(".bank").show();
$('.btnHideShow').text('Hide');
}
$('.sel').change(function ()
{
//console.log($(this).val());
var val = $(this).val();
if(val === 'None')
{
hide();
}
else
if(val === 'Bank-ATM')
{
show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='atm'>Div ATM</div>
<div class='bank'>Div Bank</div>
<select class="sel">
<option>Bank-ATM</option>
<option>None</option>
</select>
In your update to the question you left out your hide function:
(are you including jquery lib?)
function hide()
{
$('.atm').hide();
$('.bank').hide();
}
//and here's my javascript code for displaying the hidden divs
function showOptions(s) {
var val = s.options[s.selectedIndex].value;
if(val === "ATM"){
hide();
$(".atm").slideDown(400);
}else
if(val === "Bank"){
hide();
$(".bank").slideDown(400);
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
//here's my html code for div
<div class="atm">ATM</div>
<div class="bank">Bank</div>
//here's my select code
<select name="type" id="document-type" onchange="showOptions(this)">
<option value="ATM">ATM</option>
<option value="Bank">Bank</option>
</select>
I am driving myself crazy trying to figure this out...
I would like two drop-down boxes that function to show/hide text as options are clicked on. I got this part down.
https://jsfiddle.net/n1Lcfm36/
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="red"){
$(".box").not(".red").hide();
$(".red").show();
}
else if($(this).attr("value")=="green"){
$(".box").not(".green").hide();
$(".green").show();
}
else if($(this).attr("value")=="blue"){
$(".box").not(".blue").hide();
$(".blue").show();
}
else{
$(".box").hide();
}
});
}).change();
});
When both boxes are used together, I'd like it to filter similar to how it does here: http://jsfiddle.net/g5cryt31/
$().ready(function() {
$('.selectSome').on('change', function() {
showHide();
});
});
function showHide() {
// hide all rows
$('.row').hide();
// show good row only
if ($('#select_category').val() != 'null' && $('#select_subject').val() != 'null') {
$('#row_' + $('#select_subject').val() + '_' + $('#select_category').val()).show();
}
}
Except, nothing happens when you try to view one box at a time there. They need to both be used to filter...
So, first box "Class", would show nothing at first. Then, you select a class from the dropdown and related classes appear below.
Second box, "Subject" would show nothing at first. Then, you select a Subject from the dropdown and related subjects appear below.
BUT when both are used together (I guess this would require a submit button?) they filter out similar to the second jsfiddle I posted.
I think I understand what you want,
Correct me if I'm wrong-
This will show all elements regarding class X or Subject Y.
If they are picked together it will show only X + Y.
This will do what you what:
$().ready(function() {
$('.selectSome').on('change', function() {
showHide();
});
});
function showHide() {
// hide all rows
$('.row').hide();
// show good row only
if ($('#select_category').val()!= 'null'){
//class selected - check if subject seleceted
if ($('#select_subject').val() != 'null'){
//class and subject selected use double selector
$('.' + $('#select_subject').val()+'.'+$('#select_category').val()).show();
}
else {
//only class selected - use category selector
$('.' + $('#select_category').val()).show();
}
}
else
if ($('#select_subject').val() != 'null'){
//only subject selected without class
$('.' + $('#select_subject').val()).show();
}
}
You will have to add "c1.. s1..." classes (or data-attr) and you can loose the id's
New html for rows:
<div class="row s1 c1">
Subject 1 for Class 1
</div>
<div class="row s2 c1">
Subject 2 for Class 1
</div>
<div class="row s1 c2">
Subject 1 for Class 2
</div>
<div class="row s2 c2">
Subject 2 for Class 2
</div>
<div class="row s3 c2">
Subject 3 for Class 2
</div>
<div class="row s3 c3">
Subject 3 for Class 3
</div>
Fiddle
I would throw out the IDs and just use data attributes. Then dynamically build the selector. Note the different definition on the row divs and the new showHide() function.
$().ready(function() {
$('.selectSome').on('change', function() {
showHide();
});
});
function showHide() {
// hide all rows
$('.row').hide();
// show good rows only
var cat = $('#select_category').val();
var sub = $('#select_subject').val();
var selector = "[class='row']";
if (cat !== 'null') {
selector += "[data-category='" + cat + "']";
}
if (sub !== 'null') {
selector += "[data-subject='" + sub + "']";
}
$(selector).show();
}
.row {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="select_class">Class:
<select id="select_category" class="selectSome">
<option value="null">Please select...</option>
<option value="c1">Class 1</option>
<option value="c2">Class 2</option>
<option value="c3">Class 3</option>
</select>
</label>
<br/>
<label for="select_subject">Subject:
<select id="select_subject" class="selectSome">
<option value="null">Please select...</option>
<option value="s1">Subject 1</option>
<option value="s2">Subject 2</option>
<option value="s3">Subject 3</option>
</select>
</label>
<hr/>
<div class="row" data-subject="s1" data-category="c1">
Subject 1 for Class 1
</div>
<div class="row" data-subject="s2" data-category="c1">
Subject 2 for Class 1
</div>
<div class="row" data-subject="s1" data-category="c2">
Subject 1 for Class 2
</div>
<div class="row" data-subject="s2" data-category="c2">
Subject 2 for Class 2
</div>
<div class="row" data-subject="s3" data-category="c2">
Subject 3 for Class 2
</div>
<div class="row" data-subject="s3" data-category="c3">
Subject 3 for Class 3
</div>
when the 1st (destination) and 2nd (attraction or activity) dropdown lists are selected the options the 3rd drop down list shows the available activities or attractions dynamically.
here is the demo : http://codepen.io/foolishcoder7721/pen/jWYOxm
my mark up:
<div class="multi-field-wrapper">
<button type="button" class="add-field">Add Destination</button>
<div class="multi-fields">
<div class="multi-field">
<select class="text-one" name="destination[]">
<option selected value="base">Please Select</option>
<option value="colombo">Colombo</option>
</select>
<br />
<select class="text-two" name="attraction_or_activity[]">
<option value="attraction_or_activity">Select the attractions or activities</option>
<option value="attraction">Attraction</option>
<option value="activity">Activity</option>
</select>
<select id="populated_attr_or_activity" name="attraction_or_activity_selected[]">
<!-- here I ahve to populate the ARRAYS as option -->
<option value="available_attr_act">Available attractions / activities</option>
</select>
</div>
</div>
And the jQuery for that:
<script>
$(document).ready(function() {
$(".text-two").change(function() { // when the attraction_OR_activity dropdown is selected
$('#populated_attr_or_activity').html(''); // emptying the selections of 3rd dropdown list if there was any selections were made before.
/* saving selected values in variables */
var selected_destination = $('.text-one :selected').val();
var selected_attraction_or_activity = $('.text-two :selected').val();
colombo_attractions = new Array("Ganga Ramaya","National Art Gallery","Galle Face Green","Arcade Indepentent Square");
colombo_activities = new Array("City Walk 2016","Traditional Dance Competition 2016","Local Spicy food");
if ( selected_destination == 'colombo' && selected_attraction_or_activity == 'attraction') {
colombo_attractions.forEach(function(t) {
$('#populated_attr_or_activity').append('<option>'+t+'</option>');
});
}
if ( selected_destination == 'colombo' && selected_attraction_or_activity == 'activity') {
colombo_activities.forEach(function(t) {
$('#populated_attr_or_activity').append('<option>'+t+'</option>');
});
}
});
</script>
That part works perfectly.
Now I want to a add more (add destination) button to create another set same dropdown lists. so guests can select more than one attractions and the activity.
For that I've added following jQuery part to the script.
<script>
/* ADD DESTINATION */
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
var x = 1;
$(".add-field", $(this)).click(function(e) {
x++;
$($wrapper).append('<div class="multi-field"><select class="text-one'+x+'" name="destination[]"><option selected value="base">Please Select</option><option value="colombo">Colombo</option><option value="kandy">Kandy</option><option value="anuradhapura">Anuradhapura</option></select><br/><select class="text-two'+x+'" name="attraction_or_activity[]"><option value="attraction_or_activity">Select the attractions or activities</option><option value="attraction">Attraction</option><option value="activity">Activity</option></select><select id="populated_attr_or_activity'+x+'" name="attraction_or_activity_selected[]"><option value="available_attr_act">Available attractions / activities</option></select>Remove</div>');
});
$($wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
});
</script>
I am able to get a set of same dropdown list when I click the <button type="button" class="add-field">Add Destination</button>
Remove also works fine.
You can check the demo : http://codepen.io/foolishcoder7721/pen/jWYOxm
but the issue is I am unable load the 'availble attraction/activities' on the 2nd or 3rd set of drop down list.
I think it's because of same variable NAME I am using in selected_destination and selected_attraction_or_activity.
var selected_attraction_or_activity+x gives me error.
how can make it work?
What I have to change to generate dynamic variables and arrays to load the available attractions / activities in 3rd dropdown in the set of 2nd and 3rd dynamically generated dropdown list according to the options selected?
Try modifying your code as below,
HTML:
<div class="multi-field-wrapper">
<button type="button" class="add-field">Add Destination</button>
<div class="multi-fields">
<div class="multi-field">
<select class="text-one" name="destination[]">
<option selected value="base">Please Select</option>
<option value="colombo">Colombo</option>
</select>
<br />
<select class="text-two" name="attraction_or_activity[]">
<option value="attraction_or_activity">Select the attractions or activities</option>
<option value="attraction">Attraction</option>
<option value="activity">Activity</option>
</select>
<!--input id="attr_acti_btn" type="button" value="Click to Show!" /-->
<select class="populated_attr_or_activity" name="attraction_or_activity_selected[]">
<!-- here I ahve to populate the ARRAYS as option -->
<option value="available_attr_act">Available attractions / activities</option>
</select>
</div>
<br/>
<!--div id="myDiv"></div>
<div id="attr_or_act_div"></div>
<!--a href="#" class="remove_field">Remove</a-->
</div>
Javascript:
$(document).ready(function () {
$(document).on('change', '.text-two', function () { // when the attraction_OR_activity dropdown is selected
var destination = $(this).parents('.multi-field');
$(destination).find('.populated_attr_or_activity').html(''); // emptying the selections of 3rd dropdown list if there was any selections were made before.
/* saving selected values in variables */
var selected_destination = $(destination).find('.text-one :selected').val();
var selected_attraction_or_activity = $(destination).find('.text-two :selected').val();
colombo_attractions = new Array("Ganga Ramaya", "National Art Gallery", "Galle Face Green", "Arcade Indepentent Square");
colombo_activities = new Array("City Walk 2016", "Traditional Dance Competition 2016", "Local Spicy food");
if (selected_destination == 'colombo' && selected_attraction_or_activity == 'attraction') {
colombo_attractions.forEach(function (t) {
$(destination).find('.populated_attr_or_activity').append('<option>' + t + '</option>');
});
}
if (selected_destination == 'colombo' && selected_attraction_or_activity == 'activity') {
colombo_activities.forEach(function (t) {
$(destination).find('.populated_attr_or_activity').append('<option>' + t + '</option>');
});
}
});
/* ADD DESTINATION */
$('.multi-field-wrapper').each(function () {
var $wrapper = $('.multi-fields', this);
var x = 1;
$(".add-field", $(this)).click(function (e) {
x++;
$($wrapper).append('<div class="multi-field"><select class="text-one" name="destination[]"><option selected value="base">Please Select</option><option value="colombo">Colombo</option><option value="kandy">Kandy</option><option value="anuradhapura">Anuradhapura</option></select><br/><select class="text-two" name="attraction_or_activity[]"><option value="attraction_or_activity">Select the attractions or activities</option><option value="attraction">Attraction</option><option value="activity">Activity</option></select><select class="populated_attr_or_activity" name="attraction_or_activity_selected[]"><option value="available_attr_act">Available attractions / activities</option></select>Remove</div>');
});
$($wrapper).on("click", ".remove_field", function (e) { //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
});
https://jsfiddle.net/2am152en/
<body>
<div id='main'>
Number: <input type="text" class="nums"/><br/>
</div>
<button id="more">Add More</button>
<button id="result">Resut</button>
<p><b>Total:</b>0</p>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#more').on('click',function(e){
var textFied = 'Number: <input type="text" class="nums"/><br/>';
$('#main').append(textFied);
});
$('#result').on('click',function(e){
var nums = $('.nums'),total = 0;
$(nums).each(function(index, el) {
total+=$(el).val()*1;
});
$('p').html('<b>Total:</b>'+total);
});
});
</script>
</body>
Demo: https://jsfiddle.net/rampukar/5n1j3ehr/
Output:
end goal is to only show the divs, containing the text equal to that of the select menu/dropdown. But I think I can make my way there if I could just figure out how to hide them. So I have a piece of HTML:
<select id="select">
<option selected>Show All</option>
<option>Red</option>
<option>Blue</option>
</select>
<div class="row">
<div class="option">red</div>
</div>
<div class="row">
<div class="option">blue</div>
</div>
<div class="row">
<div class="option">red</div>
</div>
<div class="row">
<div class="option">blue</div>
</div>
and some jQuery:
$("#select").change(function () {
var text = $(".text").text();
var option = $("#select option:selected").text();
if(text === option)
$( ".option:contains(" + text + ")" ).parent('div').hide();
});
I feel like I tried various stuff, with no luck. If I set the value of the text to begin with, then it's easy, the trick here is to have the text to look for depend on the <select> so that in theory you would just have to add options to that. Any suggestions on this?
Here is a working jsfiddle for it: https://jsfiddle.net/dumqz5kL/
And the working script:
$(document).ready(function(){
$("#select").change(function () {
_obj = $('option:selected', this);
if (_obj.index() == 0) {
$('.row').show();
} else {
$('.row').hide();
$('.option').each(function(){
if ($(this).text() == _obj.text().toLowerCase()) {
$(this).parent().show();
};
});
};
});
});
Here is my code i tried to print the selected value from selected box.But its printing only the first value of selected item.I don't know how to get the length of selected value.any one help me for this problem
<html>
<head>
<title>jQuery Dropdown CheckList</title>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.13.custom.css">
<link rel="stylesheet" type="text/css" href="ui.dropdownchecklist.themeroller.css">
<style>
table td { vertical-align: top }
dd { padding-bottom: 15px }
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="ui.dropdownchecklist-1.4-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#s10").dropdownchecklist( { forceMultiple: true
, onComplete: function(selector) {
var values = "";
for( i=0; i < selector.options.length; i++ )
{
if (selector.options[i].selected && (selector.options[i].value != ""))
{
if ( values != "" )
values += ";";
values += selector.options[i].value;
}
}
alert(values);
}
, onItemClick: function(checkbox, selector)
{
var justChecked = checkbox.prop("checked");
var checkCount = (justChecked) ? 1 : -1;
for( i = 0; i < selector.options.length; i++ ){
if (selector.options[i].selected )
checkCount += 1;
}
}
});
});
</script>
</head>
<body>
<div id="content">
<table>
<tr>
<td>
<select id="s10">
<option value=""></option>
<option value='a'>Alice</option>
<option value='b'>Bob</option>
<option value='c'>Christian</option>
<option value='d'>Daniel</option>
<option value='e'>Elizabeth</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
for taking the length of checkbox selected item I did this but i don't know it only giving 1 as alert message
onItemClick: function (checkbox, selector)
{
$("input:checked").each(function()
{
alert($(this).val().length);
});
} });
Try this, Hope it will work
<select id="s10" multiple="multiple">
<script type="text/javascript">
$(document).ready(function() {
var foo = [];
$('#s10:selected').each(function(i, selected){
foo[i] = $(selected).text();
});
});
</script>
get the selected option with :selected:
$('#s10 option:selected').val();
What i meant to say is this: http://jsfiddle.net/T4UDu/
$('#s10').change(function(){
alert($('option:selected',this).val());
});
$('#checkboxId').change(function(){
alert($('option:selected',this).val());
});