Get Each Select Element's Selected Value and Log to Console - javascript

My function below is logging one value to console instead of 2 values. Ultimately My project will have multiple select elements and I need to pass the value of each select element through a function.
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div class="choice">
<select name="selecttype">
<option value="0">choice 1</option>
<option value="1">choice 2</option>
<option value="" selected>N/A</option>
</select>
</div>
<div class="choice">
<select name="selecttype">
<option value="0">choice 1</option>
<option value="1">choice 2</option>
<option value="" selected>N/A</option>
</select>
</div>
<button id="logvalues" type="submit" class="btn btn-success">log values to console</button>
Javascript:
$("#logvalues").click(function() {
$("option:selected").each(function(){
console.log($("option:selected").val());
});
})

You just need to pass the current context using this like:
$("#logvalues").click(function() {
$("option:selected").each(function() {
console.log( $(this).val() );
});
})
Demo:
$("#logvalues").click(function() {
$("option:selected").each(function() {
console.log($(this).val());
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div class="choice">
<select name="selecttype">
<option value="0">choice 1</option>
<option value="1">choice 2</option>
<option value="" selected>N/A</option>
</select>
</div>
<div class="choice">
<select name="selecttype">
<option value="0">choice 1</option>
<option value="1">choice 2</option>
<option value="" selected>N/A</option>
</select>
</div>
<button id="logvalues" type="submit" class="btn btn-success">log values to console</button>

Related

jquery for the drop-down select

Here is my index file code. whenever I select something into the drop-down then show me related dropdown.
I put this code in my file but I can't get drop down after selecting the main type.
css file code is .hide{display:none;}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#mode').on('change', function () {
var value = $("#mode option:selected").val();
$('.hide').slideUp('fast').find('select').val('');
$('#' + value).show('slow');
});
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="">
<label class="control-label">Mode</label>
<select class="input-large m-wrap" name="mode" id="mode" required>
<option value=""></option>
<option value="general">General Knowledge</option>
<option value="preparatory">Preparatory Exam</option>
</select>
</div>
<div class=" hide" id="general">
<br>
<label class="control-label">Module</label>
<select class="input-large m-wrap" name="module" id="sub">
<option value=""></option>
<option value="Module 1">Module 1</option>
<option value="Module 2">Module 2</option>
</select>
</div>
<div class=" hide" id="preparatory">
<br>
<label class="control-label">Exam</label>
<select class="input-large m-wrap" name="exam" id="sub">
<option value=""></option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</div>
</body>
</html>
Your problem is type class=" hide" change to class="hide"
and you need move your script to before close body tag not head tag.
$('#mode').on('change', function () {
var value = $("#mode option:selected").val();
//$('.hide').show();
$('.hide').slideUp('fast').find('select').val('');
$('#' + value).show('slow');
});
.hide{
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="">
<label class="control-label">Mode</label>
<select class="input-large m-wrap" name="mode" id="mode" required>
<option value=""></option>
<option value="general">General Knowledge</option>
<option value="preparatory">Preparatory Exam</option>
</select>
</div>
<div class="hide" id="general">
<br>
<label class="control-label">Module</label>
<select class="input-large m-wrap" name="module" id="sub">
<option value=""></option>
<option value="Module 1">Module 1</option>
<option value="Module 2">Module 2</option>
</select>
</div>
<div class=" hide" id="preparatory">
<br>
<label class="control-label">Exam</label>
<select class="input-large m-wrap" name="exam" id="sub">
<option value=""></option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</div>
</body>
</html>

how to limit selectpicker multiple select according to external value using js or j query

I want to change the maximum selectable value dynamically according to the Group member Count value. I use multiple select in selectpicker plugin for multiple section
here is my form
<div class="form-group has-label">
<label>
Contact No
<star class="star">*</star>
</label>
<input class="form-control" name="contact" id="contact" type="text" />
</div>
<div class="form-group has-label">
<label>
Group member count
<star class="star">*</star>
</label>
<input class="form-control" onchange="count();" name="memcount" id="memcount" type="number" />
</div>
<div class="form-group has-label">
<label>
Select Members
<star class="star">*</star>
</label>
<select multiple data-title="Select Members" name="members" id="members" class="selectpicker" data-style="btn-default btn-outline" data-menu-style="dropdown-blue">
<option value="1">value 1</option>
<option value="2">value 1</option>
<option value="3">value 1</option>
<option value="4">value 1</option>
</select>
</div>
I don't know how to limit the selection using javascript. please help.
You should use a SELECT attribute "data-max-options" and refresh select picker every time you change a value of this attribute. Here's a simple exapmle: https://jsfiddle.net/Denisdude/jzk0fsc2/8/
$(document).ready(function () {
$('#memcount').on('change', function (e) {
var count = parseInt($(this).val());
// set limit to SELECT tag
if (count > 0) {
$('#members').data('max-options', count)
}
// here you can remove extra values from SELECT
var values = $('#members').val();
if (values.length > count) {
// how many items we need to remove
var toRemove = values.length - count;
$('#members option:selected').each(function (index, item) {
if (toRemove) {
var option = $(item);
option.prop('selected', false);
toRemove--;
}
});
}
// update selectpickers
$('.selectpicker').selectpicker('refresh');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/i18n/defaults-*.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/bootstrap-select.min.js"></script>
<div class="form-group has-label">
<label>
Contact No
<star class="star">*</star>
</label>
<input class="form-control" name="contact" id="contact" type="text" />
</div>
<div class="form-group has-label">
<label>
Group member count
<star class="star">*</star>
</label>
<input class="form-control" value="1" name="memcount" id="memcount" type="number" min="1" />
</div>
<div class="form-group has-label">
<label>
Select Members
<star class="star">*</star>
</label>
<!-- data-max-options="1" -->
<select multiple data-title="Select Members" data-max-options="1" name="members" id="members" class="selectpicker" data-style="btn-default btn-outline" data-menu-style="dropdown-blue">
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
<option value="2">value 5</option>
<option value="3">value 6</option>
<option value="4">value 7</option>
<option value="2">value 8</option>
<option value="3">value 9</option>
<option value="4">value 10</option>
</select>
</div>
You add in your code, this (For example, I set the maximum to 2):
$('#members').picker({limit: 2});

Get a value from a data-attribute of multiple selected dropdowns (Dynamic dropdowns)

I'm trying to get the data attribute of the selected dropdown to an input box and the given code works perfectly for single dropdown included in the page and it outputs the data attribute to the input box.
But when i add two or more dropdowns the value doesn't come properly. I'm working with dynamic data which i retrieve from a DB so the amount of dropdowns can differ. How can i write the js code to be dynamic?
$(document).ready(function() {
$('select.material-price').change(function() {
var materialValue = $('select.material-price').find(':selected').data('price');
$('.material-total').val(materialValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<select class="material-price">
<option data-price="100000" value="10">Material A</option>
<option data-price="400000" value="20>">Material B</option>
<option data-price="500000" value="30">Material C</option>
</select>
<input type="text" class="material-total" readonly />
</div>
<div class="row">
<select class="material-price">
<option data-price="100000" value="10">Material A</option>
<option data-price="400000" value="20>">Material B</option>
<option data-price="500000" value="30">Material C</option>
</select>
<input type="text" class="material-total" readonly />
</div>
</div>
Make use of $(this) jquery to get the value from fired select's data and use $next() to assign value to input sits immediate next to select.
$(document).ready(function() {
$('select.material-price').change(function() {
var materialValue = $(this).find(':selected').data('price');
$(this).next('.material-total').val(materialValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<select class="material-price">
<option data-price="100000" value="10">Material A</option>
<option data-price="400000" value="20>">Material B</option>
<option data-price="500000" value="30">Material C</option>
</select>
<input type="text" class="material-total" readonly />
</div>
<div class="row">
<select class="material-price">
<option data-price="100000" value="10">Material A</option>
<option data-price="400000" value="20>">Material B</option>
<option data-price="500000" value="30">Material C</option>
</select>
<input type="text" class="material-total" readonly />
</div>
Update: when using select2 jquery surely your structure will get change on dom. so obviously we need to restructure the query too. check below snippet for reference.
$(document).ready(function() {
$('.select2').select2();
});
$(document).ready(function() {
$('select.material-price').change(function() {
var materialValue = $(this).select2().find(":selected").data("price");
$(this).parent('.row').find('.material-total').val(materialValue);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<div class="container">
<div class="row">
<select class="material-price select2">
<option value="100000" value="10">Material A</option>
<option data-price="400000" value="20>">Material B</option>
<option data-price="500000" value="30">Material C</option>
</select>
<input type="text" class="material-total" readonly />
</div>
<div class="row">
<select class="material-price select2">
<option data-price="100000" value="10">Material A</option>
<option data-price="400000" value="20>">Material B</option>
<option data-price="500000" value="30">Material C</option>
</select>
<input type="text" class="material-total" readonly />
</div>
</div>

select2 is not a function

I have this html
<div class="input-box">
<select id="billing:country_id" class="validate-select" name="billing[country_id]" title="Country">
<option value=""> </option>
</select>
</div>
<div class="input-box">
<select id="billing:region_id" class="validate-select" name="billing[region_id]" title="State">
<option value=""> </option>
</select>
</div>
<script type="text/javascript">
jQuery("#billing\\:country_id").select2({
placeholder: "Select a Country"
});
jQuery("#billing\\:region_id").select2({
placeholder: "Select State"
});
jQuery("#billing\\:country_id").change(function(){
jQuery("#billing\\:region_id").select2('destroy');
jQuery("#billing\\:region_id").select2({
placeholder: "Select a State"
});
});
</script>
but when I try to change the country dropdown I have this error:
TypeError: jQuery(...).select2 is not a function
jQuery("#billing\:region_id").select2('destroy');
I didn't see any error except that your whole function should be encapsulated inside jquery.To show demo, i just added 3 options.
$(function(){
$("#billing\\:country_id").select2({
placeholder: "Select a Country"
});
$("#billing\\:region_id").select2({
placeholder: "Select State"
});
$("#billing\\:country_id").change(function(){
$("#billing\\:region_id").select2('destroy');
$("#billing\\:region_id").select2({
placeholder: "Select a State"
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<div class="input-box">
<select id="billing:country_id" class="validate-select" name="billing[country_id]" title="Country">
<option value=""> </option>
<option value="1">option 1 </option>
<option value="2">option 2 </option>
<option value="3">option 3 </option>
</select>
</div>
<div class="input-box">
<select id="billing:region_id" class="validate-select" name="billing[region_id]" title="State">
<option value=""> </option>
<option value="1">option 1 </option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</div>
Here is the JsFiddle Link.

materialize css select is not working properly

I am trying to use select field in materialize css. But it doesn't seems work properly
my code :
<div class="container">
<div class="row">
<div class="input-field s6">
<label >OS Version</label>
<select class="validate">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('select').material_select();
});
</script>
And in this it is rendering a select field but label is still overlapping the select field. as shown in figure:
from http://materializecss.com/forms.html i have inspected where i founf this :
<div class="select-wrapper">
<span class="caret">▼</span>
<input class="select-dropdown" readonly="true" data-activates="select-options-6162e8f3-f286-fe44-8513-ab1ff6541fb1" value="Choose your option" type="text">
<ul style="width: 358px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;" id="select-options-6162e8f3-f286-fe44-8513-ab1ff6541fb1" class="dropdown-content select-dropdown">
<li class="disabled"><span>Choose your option</span></li>
<li class=""><span>Option 1</span></li>
<li class=""><span>Option 2</span></li>
<li class=""><span>Option 3</span></li>
</ul>
<select class="initialized">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
and from my code i am getting this from inspect:
<div class="select-wrapper">
<span class="select-dropdown " data-activates="select-options-fdd5c3a3-b6d7-07f2-6626-df40620c20cc">Choose your option</span>
<select class="validate initialized">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
Missing UL element is rendering below all the div, which mean above my footer.. where i am going wrong?
Fiddle : https://jsfiddle.net/007zkvut/
I updated your jsfiddle because it was loading Materialize before jQuery, so $() was not defined.
Here is the link:
https://jsfiddle.net/007zkvut/7/
It is working properly, just like in their website.
However, looking at the code you posted in your question and the code in your jsfiddle, there is a difference in the placement of <label>
In my updated jsfiddle I put another select to illustrate the difference between the different <label> placements. Just make sure it is after <select>
I have fixed the issues of select drop-down.
Please check the demo.
https://jsfiddle.net/007zkvut/9/
Your demo:
https://jsfiddle.net/007zkvut/8/
$(document).ready(function() {
$('select').material_select();
});
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="input-field s6">
<select class="browser-default waves-effect waves-light btn">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
I experienced this problem too because my view was autogenerating from the javascript code. I solved this by calling the select() function from a setTimeout and after the code that generates the select DOM and it worked.
setTimeout(function(){$('select').material_select();},1000);
This same trick will also work for the materialize datepicker. just do.
setTimeout(function(){$('.datepicker').pickadate();},2000)
Well you can use the following code:
<div class="input-field col s12 m6">
<select class="initialized">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
and, in your javascript file you need to put the next code:
(function($){
$(function(){
$(document).ready(function() {
$('select').material_select();
});
});
})(jQuery);
and ta chan!, it works.
Place the label after the select tag. It should do the trick.

Categories