Dropdown menu showing total; need it to show the selected items

Dropdown menu showing total; need it to show the selected items - javascript

I have a script that shows total price for each option in dropdown menu. Now I need to show the name of selected menu with the total.
You will find the script below that shows the total price. I need it to show the name in the <option>.
Any idea how to modify this to show the name of each dropdown selected?
//<![CDATA[
$(function() {
$("#type").on("change", function() {
$("select.calculate option").eq(0).prop('selected', true);
calc();
});
$("select.calculate").on("change", calc);
$("input[type=checkbox].calculate").on("click", calc);
function calc() {
var basePrice = 0;
newPrice = basePrice;
$("select.calculate option:selected,input[type=checkbox].calculate:checked").each(function(idx, el) {
newPrice += parseInt($(el).data('price'), 10);
});
newPrice = newPrice.toFixed(2);
$("#item-price").html(newPrice);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="type" name="buyer" class="form-control input-lg form-el">
<option value="">Service Needed</option>
<option value="kite">Car Wash & Detailing</option>
<option value="user">Mechanic visit</option>
<option value="elect">Electrican visit</option>
<option value="tyre">Tyre Service</option>
<option value="bat">Battery Service</option>
</select>
<div style='display:none; ' id='business'>
<select id="type2" name="buyername" class="form-control input-lg form-el calculate">
<option data-price="0" value="">-- Select --</option>
<option data-price="100" value="kite1">Car Wash exterior</option>
<option data-price="150" value="kite1">Car Wash In & Out</option>
<option data-price="1000" value="kite2">Full Detailing</option>
</select>
</div>
<div style='display:none; ' id='tyrem'>
<select id="type2" name="tyrem" class="form-control input-lg form-el calculate">
<option data-price="0" value="">-- Select --</option>
<option data-price="100" value="kite1">Road tyre problem rescue</option>
<option data-price="50" value="kite1">4 Tyre pressure check and adjust</option>
<option data-price="100" value="kite2">tyre 1 plug repair</option>
</select>
</div>
<div style='display:none; ' id='batm'>
<select id="type2" name="batm" class="form-control input-lg form-el calculate">
<option data-price="0" value="">-- Select --</option>
<option data-price="100" value="kite1">Battery rescue / jump start</option>
<option data-price="150" value="kite2">Battery check , jump start or replace - price depends on battery</option>
</select>
<span id="item-price">0</span>
</div>

Related

Passing ID in two different select function into 1 const function in jQuery?

I have 2 different select function that I'll use and get the id from the two different select and pass it into the 1 main function. But I have problem with getting the id from the select function.
What is the correct way on how to pass the id of cat_id and role_id into the getMyMode(a,b)
$(document).ready(function() {
$("#cat").change(function() {
let cat_id = $(this).val();
getMyMode(cat_id);
});
$("#role").change(function() {
let role_id = $(this).val();
getMyMode(role_id);
});
});
const getMyMode = (a, b) => {
console.log(a, b);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-4">
<label class="form-label"> Category</label>
<select class="form-control mb-3" id="cat">
<option value="99" hidden> Choose Category</option>
<option value="0">Cat 1</option>
<option value="1">Cat 2</option>
</select>
</div>
<div class="col-lg-4">
<label class="form-label"> Role</label>
<select class="form-control mb-3" id="role">
<option value="99" hidden>Choose Role</option>
<option value="23">Role 1</option>
<option value="24">Role 2</option>
</select>
</div>

Like this
const getMyMode = (a, b) => { console.log(a, b); };
$(function() { // when page has loaded
$("#cat, #role").on("change", function() { // when either has changed
let role_id = $("#role").val();
let cat_id = $("#cat").val();
getMyMode(cat_id,role_id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-4">
<label class="form-label"> Category</label>
<select class="form-control mb-3" id="cat">
<option value="99" hidden> Choose Category</option>
<option value="0">Cat 1</option>
<option value="1">Cat 2</option>
</select>
</div>
<div class="col-lg-4">
<label class="form-label"> Role</label>
<select class="form-control mb-3" id="role">
<option value="99" hidden>Choose Role</option>
<option value="23">Role 1</option>
<option value="24">Role 2</option>
</select>
</div>

How can I filter dropdown select option with using jQuery?

I am trying to filter (select name="DepartmentName" id="DepartmentName")according to (select name="HospitalName" id="HospitalName")'s value but it returns me zero item. What I want to do is for a user to select a hospital, then see the departments from that hospital and select one ("DepartmentName"). In other words, I want to filter the departments according to the selected hospital and offer the departments in that hospital as an option. How can I fix this?
<div class="input-group">
<label class="label">Hospital Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="margin-top:30px;margin-left:-120px;">
<select name="HospitalName" id="HospitalName">
<option disabled="disabled" selected="selected">Choose option</option>
#foreach (var item in Model.hospitals)
{
<option value="#item.Id" data-rel ="#item.Id">#item.Name</option>
}
</select>
<div class="select-dropdown"></div>
</div>
</div>
<div class="input-group">
<label class="label">Department Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="margin-top:30px;margin-left:-150px;">
<select name="DepartmentName" id="DepartmentName">
<option disabled="disabled" selected="selected">Choose option</option>
#foreach (var item in Model.departments)
{
<option value="#item.Id" >#item.Name</option>
}
</select>
<div class="select-dropdown"></div>
</div>
script code
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function() {
$("#HospitalName").change(function() {
$("#DepartmentName option").hide();
$("#DepartmentName option[id^='" + $(":selected", this).data("rel") + "']").show();
model
public class ViewModel2
{
public Patient patients;
public Illness illness;
public List<Doctor> doctors { get; set; }
public List<Illness> illnesses { get; set; }
public List<Hospital> hospitals { get; set; }
public List<DAppDate> dAppDates { get; set; }
public List<Department> departments { get; set; }
public List<Appointment> appointments { get; set; }
public Hospital hospital { get; set; }
}
I can list the department's names but I can not filter that. when I chose "Medicana" I should list only "Nutrition and Diet" and "dermatology" because "psychiatry " is department of another hospital's department and should not be shown. No output options anymore. Additionally I should not create the option dynamically have to list them help of foreach.

You can use matcher method of select2 plugin . So ,whenever user select any value from 1st select-box you can filter options inside 2nd select-box using $(option[0].outerHTML).attr("value") == rel_ .
Demo Code :
$(function() {
$("select").select2();
$("#HospitalName").change(function() {
//get rel value
var rel_ = $(this).find("option:selected").data("rel")
$("#DepartmentName").select2("val", ""); //remove any selected value
//intialze
$("#DepartmentName").select2({
matcher: function(term, text, option) {
//only show options where rel = value ..
return $(option[0].outerHTML).attr("value") == rel_
}
})
});
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<div class="input-group">
<label class="label">Hospital Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="">
<select name="HospitalName" id="HospitalName" style="width:100px">
<option disabled="disabled" selected="selected">Choose option</option>
<option value="01" data-rel="hosp-1">Hosp 1</option>
<option value="02" data-rel="hosp-2">Hosp 2</option>
<option value="03" data-rel="hosp-3">Hosp 3</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>
<div class="input-group">
<label class="label">Department Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="">
<select name="DepartmentName" id="DepartmentName" style="width:100px">
<option disabled="disabled" selected="selected">Choose option</option>
<option value="hosp-1">Item 1 h1</option>
<option value="hosp-1">Item 2 h1</option>
<option value="hosp-2">Item 3 h2</option>
<option value="hosp-2">Item 4 h2</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>

var $select1 = $('#HospitalName'),
$select2 = $('#DepartmentName'),
$options = $select2.find('option');
$select1.on('change', function() {
var hosp = $(this).find("option:selected").data("rel");
$select2.html($options.filter('[data-hosp="' + hosp + '"]'));
$select2.val($select2.find("option:first").val());
}).trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group">
<label class="label">Hospital Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="">
<select name="HospitalName" id="HospitalName">
<option disabled="disabled" selected="selected">Choose option</option>
<option value="01" data-rel="hosp-1">Hosp 1</option>
<option value="02" data-rel="hosp-2">Hosp 2</option>
<option value="03" data-rel="hosp-3">Hosp 3</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>
<div class="input-group">
<label class="label">Department Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="">
<select name="DepartmentName" id="DepartmentName">
<option disabled="disabled" selected="selected">Choose option</option>
<option value="Item 1" data-hosp="hosp-1">Item 1</option>
<option value="Item 1" data-hosp="hosp-2">Item 2</option>
<option value="Item 1" data-hosp="hosp-3">Item 3</option>
<option value="Item 1" data-hosp="hosp-1">Item 4</option>
<option value="Item 1" data-hosp="hosp-2">Item 5</option>
<option value="Item 1" data-hosp="hosp-3">Item 6</option>
<option value="Item 1" data-hosp="hosp-1">Item 7</option>
<option value="Item 1" data-hosp="hosp-2">Item 8</option>
<option value="Item 1" data-hosp="hosp-3">Item 9</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>

Consider the following.
$(function() {
$("#HospitalName").change(function() {
$("#DepartmentName option").hide();
$("#DepartmentName option[value='" + $(":selected", this).data("rel") + "']").show();
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group">
<label class="label">Hospital Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="">
<select name="HospitalName" id="HospitalName">
<option disabled="disabled" selected="selected">Choose option</option>
<option value="01" data-rel="hosp-1">Hosp 1</option>
<option value="02" data-rel="hosp-2">Hosp 2</option>
<option value="03" data-rel="hosp-3">Hosp 3</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>
<div class="input-group">
<label class="label">Department Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="">
<select name="DepartmentName" id="DepartmentName">
<option disabled="disabled" selected="selected">Choose option</option>
<option value="hosp-1" id="hosp-1-item-1">Item 1</option>
<option value="hosp-1" id="hosp-2-item-2">Item 2</option>
<option value="hosp-1" id="hosp-3-item-3">Item 3</option>
<option value="hosp-2" id="hosp-1-item-4">Item 4</option>
<option value="hosp-2" id="hosp-2-item-5">Item 5</option>
<option value="hosp-2" id="hosp-3-item-6">Item 6</option>
<option value="hosp-3" id="hosp-1-item-7">Item 7</option>
<option value="hosp-3" id="hosp-2-item-8">Item 8</option>
<option value="hosp-3" id="hosp-3-item-9">Item 9</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>
Added a Data attribute to help create a relationship. I also updated the ID so that there is something to tie to the relationship. When a User makes a change, it hides the items and only allows specific ones to be shown.

How to select from dropdown and reflect on the url like this sample.com/past_questions/chemistry/?exam_div=gce&exam_year=2018

<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());
});

Hide option of 3rd select list which are selected in 1st and 2nd select list

I have 3 select list in which 1st for x axis and 2nd for y axis with common options in all 3 select list
I want to hide options of 3rd select list which are selected in 1st and 2nd and show remaining
this must happen every time changed the 1st and 2nd select list and show last hidden options.
Please some one help me
<div class="col-md-6 col-sm-6 form-group DropDown1">
<select class="form-control DropDown" name="DropDown1" id="DropDown1">
<option value="">Select Options to Search</option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
<option value="44">44</option>
</select>
</div>
<div class="col-md-6 col-sm-6 form-group DropDown2">
<select class="form-control DropDown" name="DropDown2" id="DropDown2">
<option value="">Select Options to Search</option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
<option value="44">44</option>
</select>
</div>
<div class="col-md-12 col-sm-12">
<legend>Advanced Search Options</legend>
</div>
<div class="col-md-4 col-sm-4 form-group DropDown3">
<select class="form-control DropDowns" name="DropDown3" id="DropDown3">
<option value="">Select Options to Search</option>
<option id="DropDown_opt11" value="opt11">11</option>
<option id="DropDown_opt22" value="opt22">22</option>
<option id="DropDown_opt33" value="opt33">33</option>
<option id="DropDown_opt44" value="opt44">44</option>
<option id="DropDown_opt55" value="opt55">55</option>
</select>
</div>
I am hiding with this jquery but when i reselect 1st or 2nd select list option
last hidden option is not shown its goes on hinding options
var drop2;
var drop1;
$(document).ready(function(){
$('.DropDown1').on('change',"#DropDown1",function(){
drop1 = $("#DropDown1 option:selected").val();
});
$('.DropDown2').on('change',"#DropDown2",function(){
drop2 = $("#DropDown2 option:selected").val();
});
});
$('.DropDown3').click(function(){
var selector2 = 'DropDown_opt'+drop1;
var selector3 = 'DropDown_opt'+drop2;
$("#"+selector2).hide(selector2);
$("#"+selector3).hide(selector3);
});

You need to unhide the options that are hidden. I added a function to unhide the previously hidden options.
Check the fiddle https://jsfiddle.net/he4wq196/1/
function unhideOptions() {
$('#DropDown3 > option').each(function(){
$(this).show();
});
}

Use .prop("disabled",true) to disable the option or .hide() to hide it.
I've also cleaned your code a bit
var drop1, drop2;
$(document).ready(function() {
$(document).on('change', "#DropDown1,#DropDown2", function() {
var d = $(this).attr("id").replace("DropDown","drop");
window[d] = 'DropDown_opt' + $(this).find("option:selected").val();
hideoptions()
});
});
function hideoptions() {
$("#DropDown3 option").prop("disabled", false);
$("#DropDown3 #" + drop1).prop("disabled", true);
$("#DropDown3 #" + drop2).prop("disabled", true);
};
var drop1, drop2;
$(document).ready(function() {
$(document).on('change', "#DropDown1,#DropDown2", function() {
var d = $(this).attr("id").replace("DropDown","drop");
window[d] = 'DropDown_opt' + $(this).find("option:selected").val();
hideoptions()
});
});
function hideoptions() {
$("#DropDown3 option").prop("disabled", false);
$("#DropDown3 #" + drop1).prop("disabled", true);
$("#DropDown3 #" + drop2).prop("disabled", true);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 col-sm-6 form-group DropDown1">
<select class="form-control DropDown" name="DropDown1" id="DropDown1">
<option value="">Select Options to Search</option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
<option value="44">44</option>
</select>
</div>
<div class="col-md-6 col-sm-6 form-group DropDown2">
<select class="form-control DropDown" name="DropDown2" id="DropDown2">
<option value="">Select Options to Search</option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
<option value="44">44</option>
</select>
</div>
<div class="col-md-12 col-sm-12">
<legend>Advanced Search Options</legend>
</div>
<div class="col-md-4 col-sm-4 form-group DropDown3">
<select class="form-control DropDowns" name="DropDown3" id="DropDown3">
<option value="">Select Options to Search</option>
<option id="DropDown_opt11" value="opt11">11</option>
<option id="DropDown_opt22" value="opt22">22</option>
<option id="DropDown_opt33" value="opt33">33</option>
<option id="DropDown_opt44" value="opt44">44</option>
<option id="DropDown_opt55" value="opt55">55</option>
</select>
</div>

Control Multiple dropdown box by one main dropdown box

I am trying to create a main drop down box which control multiple drop down box. This multiple drop down box created in loop so i need dynamic script which works on class or id.
example -
<form method="post" name="postage">
Select All
<select id="options1" name="se1" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
Select Manually-
<select id="options2" name="se2" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
<select id="options3" name="se3" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
<select id="options3" name="se4" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
<input type="submit" name="submit_result" />
</form>
I found one script but i don't know where to change -
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
$('.west-yorkshire').change(function({
var value = $(this).val();
$('.className').each(function(
$(this).val(value);
alert(value);
));
}));
}//]]>
</script>

Is this what you were trying to achieve ? http://jsfiddle.net/9R9DV/2/
Changed some JS code
$(document).ready(function(){
$('#options1').change(function(){
var value = $(this).val();
$('.manual').each(function(){
$(this).val(value);
});
});
});
and classes to HTML code
<select class="manual" id="options2" name="se2" >
...
<select class="manual" id="options3" name="se3" >
...
etc.

Develop Reference

JavaScript is the programming language of the Web.

Dropdown menu showing total; need it to show the selected items - javascript

Related

Passing ID in two different select function into 1 const function in jQuery?

How can I filter dropdown select option with using jQuery?

How to select from dropdown and reflect on the url like this sample.com/past_questions/chemistry/?exam_div=gce&exam_year=2018

Hide option of 3rd select list which are selected in 1st and 2nd select list

Control Multiple dropdown box by one main dropdown box

Categories

Resources