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>
Related
<div class="row" style="margin-bottom:40px">
<div class="col-xs-12 col-sm-6">
<p><strong><label> Examination Division</strong></label>
</p>
<div>
<select type="text" name="exam_div" onchange="location = this.options[this.selectedIndex].value;" class="form-control" style="margin-bottom:15px;padding:0px 10px;font-size:16px;">
<option value selected>Select exam division </option>
<option value="https://sample.com/past-questions/chemistry/?&exam_div=jamb">JAMB</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_div=gce"> GCE</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_div=alevel">A LEVEL</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<p><strong><label>Examination Year</strong></label>
</p>
<div>
<select type="text" name="exam_div" onchange="location = this.options[this.selectedIndex].value;" class="form-control" style="margin-bottom:15px;padding:0px 10px;font-size:15.5px;">
<option value selected>Select an exam year</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2018">2018</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2017">2017</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2016">2016</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2015">2015</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2014">2014</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2013">2013</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2012">2012</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2011">2011</option>
</select>
</div>
combine the two drop downdowns into a single url that includes both the division and year
Keep it simple:
put only the div/year values on the option value, not the whole url
add the base url to a findable location with data-
add events with jquery, not onclick=
use .on("change"... on both the selects and check that both values have been entered
combine all 3 (url+2x values) into a url and redirect (commented out below)
$(".selection select").on("change", function() {
var division = $("#exam_div").val();
var year = $("#exam_year").val();
if (division === "" || year === "")
return;
var url = $(".selection").data("url") + "?exam_div=" + division + "&exam_year=" + year;
//location.href = url;
console.log(url);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='selection' data-url='https://sample.com/past-questions/chemistry'>
<div>
<p><strong>Examination Division</strong></p>
<div>
<select name="exam_div" id="exam_div">
<option value selected>Select exam division </option>
<option value="jamb">JAMB</option>
<option value="gce"> GCE</option>
<option value="alevel">A LEVEL</option>
</select>
</div>
</div>
<div>
<p><strong>Examination Year</strong>
</p>
<div>
<select name="exam_year" id="exam_year">
<option value selected>Select an exam year</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>
</div>
</div>
</div>
from a UX perspective, this would be better with the click of a "GO" button rather than select on change and the change event fires when changing select options with the keyboard.
<select type="text" name="exam_div" id="examdiv" class="form-control" style="margin-bottom:15px;padding:0px 10px;font-size:15.5px;">
<option value selected>Select an exam year</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2018">2018</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2017">2017</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2016">2016</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2015">2015</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2014">2014</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2013">2013</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2012">2012</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2011">2011</option>
</select>
use jquery try this
$(document).on('click', '#examdiv', function(){
window.location.replace($('this').val());
});
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'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!
<select name="place_have" class="form-control" multiple>
<option value="locker">locker</option>
<option value="storage">storage</option>
<option value="bathroom">bathroom</option>
<option value="food">food</option>
<option value="parking">parking</option>
<option value="play ground">play ground</option>
<option value="smoking room">smoking room</option>
</select>
Values selected above should display in another input text field below. Any help?
Using jQuery:
$("select[name='place_have']").change(function(){
var value = $(this).val();
$("input#optionOutput").val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="place_have" class="form-control" multiple>
<option value="locker">locker</option>
<option value="storage">storage</option>
<option value="bathroom">bathroom</option>
<option value="food">food</option>
<option value="parking">parking</option>
<option value="play ground">play ground</option>
<option value="smoking room">smoking room</option>
</select>
<input type="text" id="optionOutput">
I am trying to make the default value different than what is defined in the HTML. I cannot change the HTML because it is locked by a parent company of ours. I can however change the default if I use javascript. Here is the HTML
<div class="col-md-6">
<div id="addressTypeWrapper" class="form-group">
<label for="addressListArray[0].addressTypeString">Type</label>
<select name="addressListArray[0].addressTypeString" id="addressListArray[0].addressTypeString" class="form-control" required >
<option value="Home" selected="selected">Home</option>
<option value="Office">Office</option>
<option value="Contact">Contact</option>
<option value="Other">Other</option>
<option value="Billing">Billing</option>
<option value="Purchaser">Purchaser</option>
<option value="Foreign">Foreign</option>
<option value="Agency">Agency</option>
<option value="Summer">Summer</option>
<option value="School">School</option>
<option value="Campus">Campus</option>
<option value="Temporary">Temporary</option>
<option value="Shipping">Shipping</option>
<option value="Local">Local</option>
<option value="Permanent">Permanent</option></select>
</div>
</div>
Now how would I make the Office value the default only using javascript?
Simply use that one line of javascript below to change the value on runtime
document.getElementById('addressListArray[0].addressTypeString').value = 'Office';
<div class="col-md-6">
<div id="addressTypeWrapper" class="form-group">
<label for="addressListArray[0].addressTypeString">Type</label>
<select name="addressListArray[0].addressTypeString" id="addressListArray[0].addressTypeString" class="form-control" required >
<option value="Home" selected="selected">Home</option>
<option value="Office">Office</option>
<option value="Contact">Contact</option>
<option value="Other">Other</option>
<option value="Billing">Billing</option>
<option value="Purchaser">Purchaser</option>
<option value="Foreign">Foreign</option>
<option value="Agency">Agency</option>
<option value="Summer">Summer</option>
<option value="School">School</option>
<option value="Campus">Campus</option>
<option value="Temporary">Temporary</option>
<option value="Shipping">Shipping</option>
<option value="Local">Local</option>
<option value="Permanent">Permanent</option></select>
</div>
</div>
!function(){var e=document.getElementsByTagName("option");e[0].selected=!1,e[1].selected=!0}();
<div class="col-md-6">
<div id="addressTypeWrapper" class="form-group">
<label for="addressListArray[0].addressTypeString">Type</label>
<select name="addressListArray[0].addressTypeString" id="addressListArray[0].addressTypeString" class="form-control" required>
<option value="Home" selected="selected">Home</option>
<option value="Office">Office</option>
<option value="Contact">Contact</option>
<option value="Other">Other</option>
<option value="Billing">Billing</option>
<option value="Purchaser">Purchaser</option>
<option value="Foreign">Foreign</option>
<option value="Agency">Agency</option>
<option value="Summer">Summer</option>
<option value="School">School</option>
<option value="Campus">Campus</option>
<option value="Temporary">Temporary</option>
<option value="Shipping">Shipping</option>
<option value="Local">Local</option>
<option value="Permanent">Permanent</option>
</select>
</div>
</div>
Select the dropdown and use .val(). If its a dynamic id then add another attribute like data-dropdown="list" as I have done below
$("select[data-dropdown='list']").val('Office');