I'm trying to get the user selections from a multi-select dropdown but I don't seem to be able to get them. Here is the HTML:
<div id="content_dropdown" class="ui multiple search normal selection dropdown" style="border-radius: 0px;width: 100%;">
<i class="dropdown icon"></i>
<div class="default text">Dashboard widget, Improved reporting</div>
<div id="content_dropdown_menu" class="menu">
{% for content_tag in content_tags %}
<div class="item" data-value="{{content_tag}}">{{content_tag}}</div>
{% endfor %}
</div>
</div>
And here is the javascript I have tried:
var selectedValues = $('#content_dropdown').val();
var selectedValues = $('#content_dropdown').dropdown('get value');
Both of these return nothing even though the dropdown is populated.
I should also note that I had this working in a separate page, but I have been moving content onto 1 page, where I put this form into a modal. I'm not sure why this would affect it, just thought I'd point it out.
Thanks.
.dropdown('get value') won't work for multiple. You'll have to find a way to observe changes to dropdown. Here's how to do it in Aurelia:
form.html:
<select id="thickness" name="thick" multiple="" class="ui multiple dropdown selection" value.bind="thickness_selected">
<option value="">Выбрать</option>
<option value="100">100 mm</option>
<option value="150">150 mm</option>
</select>
form.ts:
export class form {
thickness_selected: number[] = [];
submit() {
const self = this;
for (let id of self.thickness_selected) {
console.log(id);
}
}
}
Try this:
var selectedValues;
$('#content_dropdown')
.dropdown({
action: function(text, value) {
selectedValues = value;
}
})
;
Related
I have two dropdowns that I need their values inside a URL. I am using selectize for the two dropdowns. But I mostly used jquery for the functions.
Expected output is a URL that changes with value of the two dropdowns after the user clicks on the button.
when I checked the value of the URL after the click event it doesn't show both on the URL instead it occurs differently I believe as it should but is there a way to make these values appear on the url together at once?
$(document).ready(function($) {
$(".dropdown_menu").selectize({
sortField: "text",
placeholder: "Select a value...",
});
$("#dad").on("click", function() {
$(".dropdown_menu").map(function() {
let marketValues = "";
let msmValues = "";
if ($(this).is("#dropdown1")) {
//using join "&" to capture multiple values
marketValues += $(this).val().join("&");
}
if ($(this).is("#dropdown2")) {
msmValues += $(this).val().join("&");
}
//expecting the url change with values of the dropdown after the click event
let url = `localhost:5000/${marketValues}/${msmValues}`;
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.14.0/js/selectize.min.js"></script>
<!-- food Drop down menu -->
<div style="max-width: 200px">
<select id="dropdown1" class="dropdown_menu" multiple="multiple">
<option value="rice">rice</option>
<option value="beans">beans</option>
</select>
</div>
<!-- name dropdown -->
<div style="max-width: 200px">
<select id="dropdown2" class="dropdown_menu" multiple="multiple">
<option value="bob">bob</option>
<option value="max">max</option>
</select>
</div>
<button id="dad">send</button>
There is no need to loop since you already have unique IDs
$(document).ready(function($) {
$(".dropdown_menu").selectize({
sortField: "text",
placeholder: "Select a value...",
});
$("#dad").on("click", function() {
let marketValues = $("#dropdown1").val().join("&"),
msmValues = $("#dropdown2").val().join("&");
//expecting the url change with values of the dropdown after the click event
let url = `localhost:5000/${marketValues}/${msmValues}`;
// do something with the URL here
console.log(url)
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.14.0/css/selectize.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.14.0/js/selectize.min.js"></script>
<!-- food Drop down menu -->
<div style="max-width: 200px">
<select id="dropdown1" class="dropdown_menu" multiple="multiple">
<option value="rice">rice</option>
<option value="beans">beans</option>
</select>
</div>
<!-- name dropdown -->
<div style="max-width: 200px">
<select id="dropdown2" class="dropdown_menu" multiple="multiple">
<option value="bob">bob</option>
<option value="max">max</option>
</select>
</div>
<button id="dad">send</button>
Outside of the map loop declare your variables url, marketValues and msmValues. Then After the loop, generate the URL with the variables. Right now, the URL gets replaced during each loop as well as the other two variables. Also, use an else if not two separate if statements.
Using each is the better option as map is used to apply functions to the content of the array. Where as each simply loops through them
$(document).ready(function($) {
$(".dropdown_menu").selectize({
sortField: "text",
placeholder: "Select a value...",
});
$("#dad").on("click", function() {
let marketValues = "";
let msmValues = "";
$(".dropdown_menu").each(function() {
if ($(this).is("#dropdown1")) {
//using join "&" to capture multiple values
marketValues += $(this).val().join("&");
}
else if ($(this).is("#dropdown2")) {
msmValues += $(this).val().join("&");
}
});
let url = `//localhost:5000/${marketValues}/${msmValues}`;
console.log(url);
});
});
We have several <select> fields that need to be set at the specified <option>. We have this "answer list" with UUID. Every <option> is evaluated: if the UUID is included at "answer list" then thats the <option> selected, otherwise we keep default "not available" <option> selected.
See below my current code, the comparison is the part I'm facing trouble.
JS code:
$('#severalStores .selectLimitInformation').each(function () { //Scan all the select fields
$(this).find("option").each(function () { //Search within every option
$.each(JSON.parse(answerList), function (item) { //Scan all "answer list"
//Compare values then choose value (not working)
if ($(this).option.value == item.expectedUUID)
$(this).val(item.expectedUUID);
else
$(this).val('0');
$(this).trigger('change');
});
});
});
HTML code:
<div class="row form-horizontal" id="severalStores">
<div class="col-md-6">
<div class="row form-horizontal">
<div class="col-md-4">
<label>Store AAA:</label>
</div>
<div class="col-md-8">
<select class="form-control selectLimitInformation">
#foreach (...) //data from ViewBag
{
<option value="#storeLimit.info">#storeLimit.description</option>
}
<option value="0">Not available</option>
</select>
</div>
</div>
<div class="row form-horizontal">
<div class="col-md-4">
<label>Store BBB:</label>
</div>
<div class="col-md-8">
<select class="form-control selectLimitInformation">
#foreach (...) //data from ViewBag
{
<option value="#storeLimit.info">#storeLimit.description</option>
}
<option value="0">Not available</option>
</select>
</div>
</div>
//Several other select
</div>
</div>
You don't need the nested loops. Put all the expected UUIDs in a Set. Then you can use the .has() method to test if the option value is in the set, and update the select value.
answerList = JSON.parse(answerList);
let expectedUUIDs = new Set(answerList.map(a => a.expectedUUID));
$('#severalStores .selectLimitInformation').each(function(i, select) { //Scan all the select fields
select.value = "0"; // start with a default
$(this).find("option").each(function(j, option) { //Search within every option
if (expectedUUIDs.has(option.value)) {
select.value = option.value;
return false; // stop looping over the options
}
});
});
Hi I have HTML bootstrap code:
$(document).ready(function() {
$("#us-state").find('select').change(function() {
var $val = $(this).val();
if ($val === 'US') {
$('.us-state-select').show();
} else {
$('.us-state-select').hide();
}
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="col-sm mb-5 us-state-select">
<label>USA STATE</label>
<select name="order_from_address_state" class="form-select">
<option>Choose country</option>
<option value="AL" name="<AL>" selected>Alabama</option>
<option value="AK" name="AK">Arkansas</option>
</select>
</div>
<div class="col-sm mb-5" id="us-state"><label>Send from country</label>
<select name="order_from_address_country" class="form-select">
<option>Send from</option>
<option value="US" name="US">USA</option>
<option value="CA" name="CA" selected>Canada</option>
</select>
</div>
(Also available on JSFiddle)
My problem is simple.
I am using foreach to show all countries and statesm but...
check the jsfiddle.
if country is selected different to the US and its load with this different country, it shows div us-state-select and if u click on different countries, it dissapears and works as expected.
But I dont want to show div with states in the case that page is loaded and its selected different country than US. How to do that?
its obvious on fiddle, I selected canada and on page load there is div with states and when click on different value for example: Send from at country box, states dissapear and it works as expected then.
Please, can you give me some advice?
I am newbie at jquery, thx.
Change your JS to be like this:
I am basically checking this logic once the page is ready and I also added some refactor in your code to help readability
$(document).ready(function() {
const checkValues = () => {
var value = $("#us-state").find('select').val();
console.log(value)
if(value === 'US'){
$('.us-state-select').show();
}else{
$('.us-state-select').hide();
}
}
$("#us-state").ready(checkValues);
$("#us-state").find('select').change(checkValues);
});
I have a .Net Core 2.2 app that is using a select list to let the user choose what account they want to view.
here is an example of that select list
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 pull-left" id="tour-dropdown">
<p>Choose an account</p>
<select class="selectpicker" data-style="btn-white" data-live-search="true" data-width="fit" data-size="5">
#if (Model.IsClient)
{
<option value="-1|false">View All Accounts</option>
}
#foreach (var item in Model.AccountList)
{
<option value="#item.AccountValue">#item.AccountName (#item.AccountCode)</option>
}
</select>
</div>
When they change the dropdown I have a jquery script that looks for it and changes the screen accordingly.
$('.selectpicker').on('change', function (ev, picker) {
var selectedAccount = $(this).find("option:selected").val();
window.location.href = "/gohere";
});
The issue is when my select list has a lot of accounts in it 10K+ that var selectedAccount = $(this).find("option:selected").val(); seems to lock up the page for a few seconds before it does anything.
I have used asp-for on select lists before and it seems much quicker, only issue is that I have some Javascript variables I add to the redirect which I can't really control through the asp-for.
Does anyone know a faster way of finding the selected account on change for a select list?
I am trying to write to a div the dynamic value of a drop down list, like this:
JQuery looks like this
$.each($('.shoppingCart_qty-select'), function () {
var br = document.createElement('br');
$("#qtyOrderPreview").append($(this).html()).append(br);
});
Markup looks like this
<div class="shoppingCart_qtyArea">
<div class="shoppingCart_qtyLabel">QTY</div>
<select class="shoppingCart_qty-select">
<option value="1">#group.First().Count</option>
</select>
</div>
<div id ="qtyOrderPreview"></div> <!-- WRITE IT HERE -->
But, I cannot see any value being put on the page, although #group.First().Count has a value.
What do I have to do different to be able to get the value from the drop down list and place it on the div, using jquery?
Many thanks.
The key is you need to get HTML from <option> not <select>
$.each($('.shoppingCart_qty-select'), function() {
var br = document.createElement('br');
$("#qtyOrderPreview").append($(this).find('option').html()).append(br);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shoppingCart_qtyArea">
<div class="shoppingCart_qtyLabel">QTY</div>
<select class="shoppingCart_qty-select">
<option value="42">42</option>
</select>
</div>
<div id="qtyOrderPreview"></div>