How to show a div when an option is selected [duplicate] - javascript

I'm trying to make a form that changes after the users makes a choice.
If the user select "Option A" then show content of the div with the class "option1".
I have already done this with very simple jquery(see code below or jsfiddle).
What I can't figure out is how to make it dynamic.
Here is how I would do it in my head:
Get all option values from "#select" and put into array.
Replace the content of "hideAll" function with the new array.
Make some kind of "for-each-function" that runs though the array and
makes the if stament.
A little note: The option value are always the same as the div class.
var hideAll = function() {
$('.option1, .option2, .option3').hide();
}
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
console.log(category);
if (category === 'option1') {
$('.option1').show();
}
if (category === 'option2') {
$('.option2').show();
}
if (category === 'option3') {
$('.option3').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</form>


Give your option divs another class
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1 optiondiv" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2 optiondiv" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3 optiondiv" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
Use your new class in hideall
var hideAll = function() {
$('.optiondiv').hide();
}
Use the select value to display a block
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
$('.' + category).show();
});
http://jsfiddle.net/yd5qsquL/


No need for a loop at all, and you can just search for any div whose class begins with option:
var hideAll = function() {
$('div[class^=option]').hide();
}
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
$('.' + category).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>


I think there's an easier way to tackle this. First, use a combination of IDs and classes for the HTML, and then use JQuery to handle the dynamic stuff for you.
The HTML
Note that I have added class="option-grouping" id="option1" etc to each of your divs. This is better semantic structure and makes the JQuery easier.
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option-grouping" id="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option-grouping" id="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option-grouping" id="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
The JQuery
This is the cool part. With that all done, try this as your JQuery:
$('#select').on('change', function() {
var category = $(this).val();
/* Hide all the divs */
$('.option-grouping').hide();
/* Now unhide the selected options */
$('#' + category).show();
});
Works a treat!

Related

Change HTML Select Tag when clicked from many identical elements

I'm trying to add some functiolality with jQuery to an HTML page but I'm having some troubles with accessing the DOM.
By now,I'm accessing to the DOM elements by 'id' that's because I think is the easiest way to do it but it has a problem. For a unique elemet it's ok but what if I have 2 or more equal elements? Id's supposed to be unique so I need a way diferent to do it.
I have some code which partially does what I need, but as I mentioned before, it only works with "one element", I need to do the same but with 2 or more "equal elements". So let me show you my code so far.
<div style="background-color: indigo;">Input
<select class="" name="" id="ana_dig">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig" style="display:none;">
<option value="" selected disabled>Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana">
<option value="" selected disabled>Choose</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
$(function() {
$('#ana_dig').change(function() {
$('.input').hide();
$('#' + $(this).val()).show();
});
});
As you can see, I have a 'div' which has 3 'select' and depending on what option is selected in the first 'select' it shows you the second or de third 'select'. Pretty easy but if copy and paste de 'div' the second 'div' does not work as the first. What sould I do if I want to 2, 3 or more 'div' work like the first one? Any suggestions?

Use classes instead.
NOTICE CHANGES NO MORE IDS, CLASS ADDED TO INPUTS YOU CAN HAVE MULTIPLE CLASSES SEPERATED BY SPACE
<div style="background-color: indigo;">Input
<select class="someclass" name="">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input dig" style="display:none;">
<option value="" selected disabled>Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input ana" style="display:none;">
<option value="" selected disabled>Choose</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
And then do this instead: SEE THE CHANGE HERE ALSO
$(function() {
$('.someclass').change(function() {
$('.input').hide();
$('.' + $(this).val()).show(); // dot is looking for class # is looking for id
});
});

I've used data attributes as an additional selector.
First we find the parent element enclosing our group of select elements. We then use jQuery toggle() function to hide and show. We can then hide and show using the data attributes.
NOTE the id's are unique in the duplicated div which is fine. The jQuery below has no dependence on IDs
$("[data-input=type]").on("change", function(){
//Find the parent that encloses our selects
var $parent = $(this).closest(".inputGroup");
var selValue = $(this).val();
//Show and hide using toggle()
//$($parent).find("[data-input=ana]").toggle(selValue === "ana");
//$($parent).find("[data-input=dig]").toggle(selValue === "dig");
//Don't hide the "type" element - hide the other selects
$($parent).find("[data-input]").not(this).hide();
//Show the one with the matching data attribute
$($parent).find("[data-input= " + selValue + "]").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background-color: indigo;" class="inputGroup">Input
<select class="" name="" id="ana_dig" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
<div style="background-color: blue;" class="inputGroup">Input
<select class="" name="" id="ana_dig2" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig2" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana2" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
With just a little bit of effort we can extend this into dynamically added content. We just need to add one more containing element around the form.
//Event handler is now attatched to [data-input=type] inside
//formGroup, including any that are dynamically added
$("#formGroup").on("change", "[data-input=type]", function() {
//Find the parent that encloses our selects
var $parent = $(this).closest(".inputGroup");
var selValue = $(this).val();
//Show and hide using toggle()
//$($parent).find("[data-input=ana]").toggle(selValue === "ana");
//$($parent).find("[data-input=dig]").toggle(selValue === "dig");
//Don't hide the "type" element - hide the other selects
$($parent).find("[data-input]").not(this).hide();
//Show the one with the matching data attribute
$($parent).find("[data-input= " + selValue + "]").show();
});
//Code to add new row
$("#addRow").on("click", function(){
//Clone first row
var rowClone = $(".inputGroup").eq(0).clone(true);
var rowCount = $(".inputGroup").length;
//Change the ids of the nested select elements
rowClone.find("select").each(function(){
$(this).attr("id", $(this).attr("id") + rowCount);
});
//Append the row
$("#formGroup").append(rowClone);
});
.inputGroup:nth-child(even) {
background-color:#CCC;
}
.inputGroup {
padding:5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="formGroup">
<div class="inputGroup">Input
<select class="" name="" id="ana_dig" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
<div class="inputGroup">Input
<select class="" name="" id="ana_dig2" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig2" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana2" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
</div>
<input type="button" value="Add Another Row" id="addRow"/>

Ok, this hides both the digital, and analog submenus, until it is selected by the first selection:
<script>
$(document).ready(function(){
$("select").hide();
$("#ana_dig").show();
$("#ana_dig").click(function(){
var x="#" + $(this).val();
$("select").hide();
$("#ana_dig").show();
$(x).show();
});
});
</script>
the op said if they wanted to add more in the first pull down selection, you would just add your additional option element with the value equal to the id to show. I added a reset function so when the first selection is changed, it resets... expanding it only is in the html code too.... I like to use ID for forms, and classes just for styling, and tag names for styling on page events

Take the value and create filter from input field?

How to take text from selected options and wrap it into div and append that div to the one with class appendElements?
here is jsfiddle https://jsfiddle.net/2w5dp7vk/14/ I am trying to add filter when i check some option or when i type something in input field. I want to be able to take the value from input or select option and wrap that value into div tag and append it on .appendElements when i click on done button.
<div class="appendElements"></div>
<div class="searchFilter">
<select class="selectpicker" data-live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>

First, you've to attach a change event to your select èlement .searchFilter, then when the user changes you've to get the text of the selected option using $('.searchFilter option:selected').text() and attach it to your output div .appendElements, like:
jQuery suggestion :
var selectElement = $('.selectpicker');
selectElement.on('change', function() {
var selected_option_text = selectElement.find('option:selected').text();
$('.appendElements').text(selected_option_text);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="searchFilter">
<select class="selectpicker" data-live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
<br>
<div class="appendElements"></div>
VanillaJS suggestion :
var selectElement = document.querySelector('.selectpicker');
selectElement.addEventListener('change', function() {
var selected_option_text = selectElement.selectedOptions[0].text;
document.querySelector('.appendElements').textContent = selected_option_text;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="searchFilter">
<select class="selectpicker" data-live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
<br>
<div class="appendElements"></div>

You can get the value of the select when it changes and set it as the textContent of the div in which you want to display the value of the select.
<div class="searchFilter">
<select class="selectpicker" data-live-search="true" onchange="showChanges()" id="selectpicker">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
<p/>
<div id="result"></div>
<script>
function showChanges(){
document.getElementById("result").textContent = document.getElementById("selectpicker").value;
}
</script>
jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="searchFilter">
<select class="selectpicker" data-live-search="true" onchange="showChanges()" id="selectpicker">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
<p/>
<div id="result"></div>
<script>
function showChanges(){
$('#result').text($('#selectpicker').val());
}
</script>

grab all selected answers from a form

I am trying to grap all selected values from a page and push them into an array.
I have tried the following:
values = $.map(answers ,function(option) {
return option.value;
});
//it was working at somepoint, but apparently not anymore. is there a easier way to get this accomplished?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
</div>
<div class="input-field select2">
<p>q2</p>
<select>
<option value="" disabled selected>Choose your option</option>
<option value="2">a</option>
<option value="5">b</option>
<option value="7">c</option>
<option value="10">d</option>
<option value="12">e</option>
</select>
<!-- <label>Materialize Select</label> -->
</div>
<div class="input-field select3">
<p>What do you Find More Interesting?</p>
<select>
<option value="" disabled selected>a</option>
<option value="1">b</option>
<option value="3">c</option>
</select>
</div>

Returning form results in a separate div tag

So I want to return a user's form results in a div so they can see what they have chosen underneath the form using JQuery but struggling to use the right code? Ive tried using the .html function and replaceWith. etc but nothing seems to be working?
Here's my html code:
<form id="myform">
<h4>Enter your booking slot here:</h4><br>
<select id="programmes">
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
<option value="test5">Test 5</option>
</select><br><br>
<select id="time">
<option value="one">01:00</option>
<option value="two">02:00</option>
<option value="three">03:00</option>
<option value="four">04:00</option>
<option value="five">05:00</option>
<option value="six">06:00</option>
<option value="seven">07:00</option>
<option value="eight">08:00</option>
<option value="nine">09:00</option>
<option value="ten">10:00</option>
<option value="eleven">11:00</option>
<option value="twevle">12:00</option>
<option value="one-pm">13:00</option>
<option value="two-pm">14:00</option>
<option value="three-pm">15:00</option>
<option value="four-pm">16:00</option>
<option value="five-pm">17:00</option>
<option value="six-pm">18:00</option>
<option value="seven-pm">19:00</option>
<option value="eight-pm">20:00</option>
<option value="nine-pm">21:00</option>
<option value="ten-pm">22:00</option>
<option value="eleven-pm">23:00</option>
<option value="midnight">00:00</option>
</select><br><br>
<button type="submit" value="Submit Booking">
</form>
</div>
<div></div>

$('#select').on('change', function() {
$('#result').html( $(this).find('option:selected').text() )
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
<option value="test_1">Test 1</option>
<option value="test_2">Test 2</option>
<option value="test_3">Test 3</option>
<option value="test_4">Test 4</option>
<option value="test_5">Test 5</option>
</select>
<div id="result"></div>

Chained selects - delegate dynamically added select

I'm using chained selects. What i need to do, is to use multiple selects added dynamically by user, but it won't work.
Here is a demo page with multiple chained selects
Here's a jsfiddle:
http://jsfiddle.net/5qLfn/
And here's code:
<form>
<select class="mark-remote" name="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select class="series-remote" name="series">
<option value="">--</option>
</select>
<select class="model-remote" name="model">
<option value="">--</option>
</select>
<select class="engine-remote" name="engine">
<option value="">--</option>
</select>
<button id="button-remote" type="submit">Button</button>
</form>
<form>
<select class="mark-remote" name="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select class="series-remote" name="series">
<option value="">--</option>
</select>
<select class="model-remote" name="model">
<option value="">--</option>
</select>
<select class="engine-remote" name="engine">
<option value="">--</option>
</select>
<button id="button-remote" type="submit">Button</button>
</form>
<form>
<select class="mark-remote" name="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select class="series-remote" name="series">
<option value="">--</option>
</select>
<select class="model-remote" name="model">
<option value="">--</option>
</select>
<select class="engine-remote" name="engine">
<option value="">--</option>
</select>
<button id="button-remote" type="submit">Button</button>
</form>
/* For multiple jquery.chained.js */
$(".series").each(function() {
$(this).chained($(".mark", $(this).parent()));
});
$(".model").each(function() {
$(this).chained($(".series", $(this).parent()));
});
$(".engine").each(function() {
$(this).chained([
$(".series", $(this).parent()),
$(".model", $(this).parent())
]);
});
And it work's for me as a static selects. But it won't work when I try do add new level with jquery like this:
$("#ql_add_case_schema").on("click", function () {
var select='\
<div class="container">\n\
<div class="row clearfix">\n\
<div class="col-md-1 column">\n\
USUN\n\
</div>\n\
<div class="col-md-2 column">\n\
<select class="mark-remote" name="mark"><option value="">--</option><option value="bmw">BMW</option><option value="audi">Audi</option></select>\n\
</div>\n\
<div class="col-md-2 column">\n\
<select class="series-remote" name="series"><option value="">--</option></select>\n\
</div>\n\
<div class="col-md-2 column">\n\
<select class="model-remote" name="model"><option value="">--</option></select>\n\
</div>\n\
<div class="col-md-2 column">\n\
<select class="engine-remote" name="engine"><option value="">--</option></select>\n\
</div>\n\
</div>\n\
</div>\n\
</div>';
$('#ql_div_kodowania').append(select);
});

Categories

Resources