Select Dropdown based on the partial value in dropdown value field - javascript

I have a scenario where i have to select the drop value based on querystring.
Query string could be likeq=c-1 q=c-2 q=p-5
and value in drop-down could be value="8-P-5" value="5-G-0" value="7-P-7"
How can i select the drop-down value based on query-string
Is it possible to do it from Code-behind C# or jquery is easy solution.
<select name="ctl00$ContentPlaceHolder1$ddlOptionGroup" id="ContentPlaceHolder1_ddlOptionGroup" class="form-control">
<option value="1-C-1">Item 1</option>
<option value="4-C-2">Item 2</option>
<option value="5-G-0">Item 3</option>
<option value="7-P-7">Item 4</option>
<option value="8-P-5">Item 5</option>
<option value="10-C-4">Item 6</option>
<option value="3-P-0">Item 7</option>
<option value="2-P-0">Item 8</option>
<option value="6-G-0">Item 9</option>
</select>
If query-string is q=c-2 then this should be selected <option value="4-C-2" selected>Item 2</option>

If you are open for a JavaScript/jQuery solution you can take the window.location.search and then use a jQuery selector to find the option based on a contains condition in a specific select tag.
Do note that this assumes the value that comes in your q is uniquely identifiable in a value property of your select element. In your current dataset q=p-0 will have both Item 7 AND Item 8 match. As you didn't provide a business rule for that case I left that here untouched.
Here is a snippet that demonstrate this:
// use window.location.search
var search = '?q=p-5'; // window.location.search;
// handle possible search for this value ?foo=bar&q=p-5#fragment
var parms = search.substr(1).split('&');
for(var i=0; i< parms.length;i++)
{
var keyValue= parms[i].split('=');
if (keyValue[0] === "q" && keyValue.length > 0) {
var value = keyValue[1].split('#');
$('select > option[value*="' + value[0].toUpperCase() + '"]').prop('selected',true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="ctl00$ContentPlaceHolder1$ddlOptionGroup" id="ContentPlaceHolder1_ddlOptionGroup" class="form-control">
<option value="1-C-1">Item 1</option>
<option value="4-C-2">Item 2</option>
<option value="5-G-0">Item 3</option>
<option value="7-P-7">Item 4</option>
<option value="8-P-5">Item 5</option>
<option value="10-C-4">Item 6</option>
<option value="3-P-0">Item 7</option>
<option value="2-P-0">Item 8</option>
<option value="6-G-0">Item 9</option>
</select>

for (int i = DropDownList1.Items.Count-1; i >0 ; i--)
{
if (DropDownList1.Items[i].Value.Contains("C-2"))
{
DropDownList1.Items[i].Selected = true;
break;
}
}
or you can do it by Linq syntax
DropDownList1.Items.Cast<ListItem>()
.Where(x => x.Value.Contains("C-2"))
.LastOrDefault().Selected = true;

Related

Why is the output from a Array.prototype.map() of the result of a Array.prototype.filter() not an array?

When I try to use the Array.prototype.some() function on what I think should be an array as the result of an Array.prototype.map() from .filter() I get
.some is not a function
Here is a short snippet demonstrating the error with sufficient setup:
// Get all options from dropdown
var options = $("#mySelect option");
// Get array of strings matching regex from options
var numbers = options.map(function (index, option) {
return option.value.match("[0-9]+")[0];
});
// Attempt to use some on the numbers array
numbers.some(function (number) {
console.log(number);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Drop down menu with 10 options in words -->
<select id="mySelect">
<option value="1">One 1</option>
<option value="2">Two 2</option>
<option value="3">Three 3</option>
<option value="4">Four 4</option>
<option value="5">Five 5</option>
<option value="6">Six 6</option>
<option value="7">Seven 7</option>
<option value="8">Eight 8</option>
<option value="9">Nine 9</option>
<option value="10">Ten 10</option>
</select>
You (I) are mixing up JS array functions and JQuery functions. The .filter() in your post is actually a JQuery function that returns a JQuery object. From there, map is another JQuery function returning JQuery and thus .some() on your object does not exist as it does not exist as a JQuery function.
A suitable solution would be to use the JQuery .each() function instead like this:
// Get all options from dropdown
var options = $("#mySelect option");
// Get array of strings matching regex from options
var numbers = options.map(function (index, option) {
return option.value.match("[0-9]+")[0];
});
// Iterate through your object with JQuery's .each()
numbers.each(function (index, number) {
console.log(number);
// You can return false to break this loop early similarly to .every() (or inversely to .some) on JS arrays
if (number == 5){
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Drop down menu with 10 options in words -->
<select id="mySelect">
<option value="1">One 1</option>
<option value="2">Two 2</option>
<option value="3">Three 3</option>
<option value="4">Four 4</option>
<option value="5">Five 5</option>
<option value="6">Six 6</option>
<option value="7">Seven 7</option>
<option value="8">Eight 8</option>
<option value="9">Nine 9</option>
<option value="10">Ten 10</option>
</select>

How do I create a list of the selected options from a dropdwon

I am trying to loop through a multiple select dropdown list and add all of the selected options to a comma separated list.
My dropdown code is:
<select name="testnameID" id="testnameID" multiple>
<option value="1">Test number 1</option>
<option value="2">Test number 2</option>
<option value="3">Test number 3</option>
<option value="4">Test number 4</option>
<option value="5">Test number 5</option>
<select>
In my tag I am using the following, but think it can be simplified or improved:
var testnameID = $('#testnameID').val();
var testnameText;
Array.from(document.querySelector("#testnameID").options).forEach(function(option_element) {
let option_text = option_element.text;
let is_option_selected = option_element.selected;
if (is_option_selected===true){
testnameText = testnameText + option_text +", ";
console.log("TestnameText: "+testnameText);
console.log("\n\r");
}
});
I need to generate a variable, testnameText, which if the first three items were selected, would return a value of "Test number 1, Test number 2, Test number 3"
I'm getting myself in a muddle!
You can try using Document.querySelectorAll() to target all the selected options like the following way:
Array.from(document.querySelectorAll("#testnameID option:checked")).forEach(function(option_element) {
let option_text = option_element.text;
var testnameText = option_text +", ";
console.log("TestnameText: "+testnameText);
console.log("\n\r");
});
<select name="testnameID" id="testnameID" multiple>
<option value="1" selected>Test number 1</option>
<option value="2" selected>Test number 2</option>
<option value="3" selected>Test number 3</option>
<option value="4">Test number 4</option>
<option value="5">Test number 5</option>
<select>
You can also try using Array.prototype.map() and Arrow function expressions which is more shorter.
The following example creates an array of the selected options:
var checkedOptions = Array.from(document.querySelectorAll("#testnameID option:checked"));
var res = checkedOptions.map(option_element => ("TestnameText: "+option_element.text));
console.log(res);
<select name="testnameID" id="testnameID" multiple>
<option value="1" selected>Test number 1</option>
<option value="2" selected>Test number 2</option>
<option value="3" selected>Test number 3</option>
<option value="4">Test number 4</option>
<option value="5">Test number 5</option>
<select>
In this case, jquery's each() can help. So getting selected options is pretty simple:
$('#testnameID :selected').each(function (index, el) {
console.log("TestnameText: " + $(el).text());
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<select name="testnameID" id="testnameID" multiple>
<option value="1" selected>Test number 1</option>
<option value="2" selected>Test number 2</option>
<option value="3" selected>Test number 3</option>
<option value="4">Test number 4</option>
<option value="5">Test number 5</option>
</select>
selectedOptions contains all the selected options of a select element. You can use it like this:
const select = document.querySelector('select');
select.addEventListener('change', e => {
// Option texts as an array
const texts = Array.from(e.target.selectedOptions).map(({text}) => text);
// Option texts as a comma-separated string
const textsStr = texts.join(', ');
console.log(texts);
console.log(textsStr);
});
<select multiple>
<option value="1">Test number 1</option>
<option value="2">Test number 2</option>
<option value="3">Test number 3</option>
<option value="4">Test number 4</option>
<option value="5">Test number 5</option>
</select>
This works outside of the event too, just refer the select element directly instead of e.target.

Js dropdown depends of an other dropdown

Hey guys simple question how can I display in the second dropdown information that depends of the first one.
Example. I have this:
var option = document.getElementById("second_dropdown").getElementsByTagName("option");
for (var j = 0; j < option.lenght; j++) {
option[j].disabled = true;
}
<!-- DROPDOWN 1 -->
<select id="first_dropdown" name="first_d">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<!-- DROPDOWN 2 -->
<select id="second_dropdown" name="second_d">
<optgroup label="1">
<option value="100">blabla</option>
<option value="101">blabla</option>
<option value="102">blabla</option>
</option>
<optgroup label="2">
<option value="103">blabla</option>
<option value="104">blabla</option>
<option value="105">blabla</option>
</option>
<optgroup label="3">
<option value="106">blabla</option>
<option value="107">blabla</option>
<option value="108">blabla</option>
</option>
<select>
And I would like to display in dropdown 2 only the optgroup that has been selected in dropdown 1 ...
I really don't know about js so I hope that i explained it well and thanks in advance :)
But here I only disable all (and I want to disable only what's not selected in dropdown one) and I don't want to disable but I want to undisplay.
Loop through optgroup of second <select> and in loop check if value of first select is equal to label of optgroup remove disabled of it.
document.querySelector("#first_dropdown").onchange = function(){
var val = this.value;
document.querySelectorAll("#second_dropdown optgroup").forEach(function(ele){
ele.disabled = ele.label != val
});
};
<select id="first_dropdown" name="first_d">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select id="second_dropdown" name="second_d">
<optgroup label="1">
<option value="100">blabla</option>
<option value="101">blabla</option>
<option value="102">blabla</option>
</optgroup>
<optgroup label="2">
<option value="103">blabla</option>
<option value="104">blabla</option>
<option value="105">blabla</option>
</optgroup>
<optgroup label="3">
<option value="106">blabla</option>
<option value="107">blabla</option>
<option value="108">blabla</option>
</optgroup>
<select>
Also you should change display property of element if you want to show/hide optgroup
document.querySelector("#first_dropdown").onchange = function(){
var val = this.value;
document.querySelectorAll("#second_dropdown optgroup").forEach(function(ele){
ele.style.display = ele.label==val ? "block" : "none";
});
};
Also you can do this work simplify using jquery
$("#first_dropdown").change(function(e){
$("#second_dropdown optgroup").css("display", function(){
return this.label==e.target.value ? "block" : "none";
});
});
You can try the following way:
var firstDD = document.getElementById('first_dropdown');
firstDD.addEventListener('change',changeDD);
function changeDD(){
var fValue = firstDD.value;
document.querySelectorAll('#second_dropdown > optgroup').forEach(function(el){
if(el.label != fValue )
el.style.display='none';
else
el.style.display='block';
});
document.querySelector('#second_dropdown').value = "";
}
changeDD(firstDD);
<select id="first_dropdown" name="first_d">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select id="second_dropdown" name="second_d">
<optgroup label="1">
<option value="100">blabla</option>
<option value="101">blabla</option>
<option value="102">blabla</option>
</optgroup>
<optgroup label="2">
<option value="103">blabla 21</option>
<option value="104">blabla</option>
<option value="105">blabla</option>
</optgroup>
<optgroup label="3">
<option value="106">blabla</option>
<option value="107">blabla</option>
<option value="108">blabla</option>
</optgroup>
<select>

Check if combobox is selected

I have two comboboxes. I want to know which combobox is selected. I want to do like below using ajax, jquery in a jsp file.
if(combobox1 selected)
{
action 1
}
if(combobox2 selected)
{
action 2
}
Thanks.
would it be this ? in this case you could know which was the last modified element. I used switch case because you could have several comboxes
<div class="wrapper">
<select class="my_combox" name="combox1">
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
</select>
<select class="my_combox" name="combox2">
<option value="5">other value 1</option>
<option value="6">other value 1</option>
<option value="7">other value 1</option>
<option value="8">other value 1</option>
</select>
</div>
Script
var lastSelectedCombox = "";
$('.my_combox').on('change',function(e){
lastSelectedCombox = $(this).attr('name');
switch(lastSelectedCombox){
case 'combox1':console.log('first combox');
break;
case 'combox2':console.log('second combox');
break;
default:
console.log('any combox expected');
}
})

select onclick event jquery

I need to test select box values using javascript. But Its outputs the previous value on click, don't know what would be the case.
Here's my code:
$(document).ready(function(){
$('select').click(function(){
var id = this.id;
var text = $('#'+id+' :selected').text();
alert(text);
});
});
<select id="combo">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
<option value="5">Test 5</option>
<option value="6">Test 6</option>
<option value="7">Test 7</option>
</select>
I gave the static id for testing purpose, but in real I want to take out the id from select box.
My question is, how can I get the exact value output(HTML) of options on click.
$(document).ready(function(){
alert($('#combo').val());
alert($('#combo option:selected').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="combo">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
<option value="5">Test 5</option>
<option value="6">Test 6</option>
<option value="7">Test 7</option>
</select>
You can use $('select').val(). This will give you the select field value. Listen for change event to capture the changes.
Here is the common and easy approach:
$("#combo").change(function(){
var selectedvalue = $( "#combo option:selected" ).text();
});

Categories