I am trying to append the select value for each div to its heading. How can I grab the value within each div then append it?
I want to append this on page load and not wait until a click or change takes effect. Here is a jsfiddle https://jsfiddle.net/dqfvyvdt/2/
Markup: Repeated multiple times and each box will have a different selected value.
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option selected="selected" value="car">Car</option>
<option value="car">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
JS:
var title = $('.module').find('h3');
var type = $('.module').find('.type').val();
$(title).append(type);
$('.module').find('.type').val() gets the value of the first type element, you need to find the value of each type in relation to the h3 element.
So you need to iterate over the h3 and find each one's type value and add it to its contents
Use .append()
$('.module h3').append(function(i, text){
return $(this).next().val()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike" selected>Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter" selected>Skooter</option>
</select>
</div>
If you want to update the content of change also then
$('.module .type').change(function(i, text) {
var $this = $(this);
$this.prev().find('.h3-type').text($(this).find('option:selected').text());
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="module">
<h3>This is a <span class="h3-type"></span></h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a <span class="h3-type"></span></h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike" selected>Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a <span class="h3-type"></span></h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter" selected>Skooter</option>
</select>
</div>
Related
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>
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>
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!
In my PHP page I have some dropdown menu like this one:
<div class="row">
<div class="col-md-6">
<label>
<select name='subcat' class='option'>
<?php echo $categories ?>
</select>
</label>
</div>
</div>
I wish to create a button able to change the category one time for all my dropdown.
How could I create a button to toggle select all my dropdown menu at once using jQuery or Javascript?
"No, I wish to create a new dropdown menu for toggle all other dropdown menus option at once. – Simone"
This jQuery code changes values using HTML value="" not what's written inside the <option> tags - that would allow making mistakes too easily. Let me know if this is what you were looking for.
Cheers!
$(".master").change(function() {
var master = $('.master').val();
var peasants = $('.option');
peasants.each(function() {
peasants.val(master);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<label>
<select name='subcat' class='master'>
<option value="0">Master</option>
<option value="1">option one</option>
<option value="2">option two</option>
<option value="3">option three</option>
</select>
</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>
<select name='subcat' class='option'>
<option value="0">Select</option>
<option value="1">option one</option>
<option value="2">option two</option>
<option value="3">option three</option>
</select>
</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>
<select name='subcat' class='option'>
<option value="0">Select</option>
<option value="1">option one</option>
<option value="2">option two</option>
<option value="3">option three</option>
</select>
</label>
</div>
</div>
Are you trying to create a Reset button something like below?
$("#mybtn").on("click",function(){
$(".option").each(function(){
$(this).val(0)}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<label>
<select name='subcat' class='option'>
<option value="0">Select</option>
<option value="1">option one</option>
<option value="2">option two</option>
<option value="3">option three</option>
</select>
</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>
<select name='subcat' class='option'>
<option value="0">Select</option>
<option value="1">option one</option>
<option value="2">option two</option>
<option value="3">option three</option>
</select>
</label>
</div>
</div>
<button id="mybtn">Reset</button>
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);
});