Select2 - display selected item after refresh page - javascript

I use select2 to (https://select2.github.io) to bulding drop down list. I have problem with display selected item after refresh the page (my select is stored in DB). Where excalcly have I add select or selected="selected" ?
I can't add this in because every user of my website selects own item in his settings.
<script>
$(document).ready(function() {
$(".js-example-basic-single").select2({
});
$("select").select2({
});
});
</script>
<select class="js-example-basic-single" name="field">
<option value="city1">city1</option>
<option value="city2">city2</option>
</select>

<script>
$(document).ready(function() {
var storedValue = 'city2';
var $select = $(".js-example-basic-single").select2({});
$select.select2('val', 'storedValue');
});
</script>
<select class="js-example-basic-single" name="field">
<option value="city1">city1</option>
<option value="city2">city2</option>
</select>
How you get the stored value from your server is up to you / stack. If you don't have a backend you can use localStorage to store what the user selected.

Related

how to pass selected value from selected page to next page?

<select id="one" name="age">
<option value="0-50">Select Age</option>
<option value="0-4">0-4</option>
<option value="5-9">5-9</option>
<option value="10-14">10-14</option>
<option value="15-19">15-19</option>
</select>
I want to show text which user selected from this dropdown to next page
for exmaple :- if user select age 5-9 from this page and user have see selected age to the next page like "selected age is 5-9"
You can use localStorage to save the selected age:
one.addEventListener("change", function(){
localStorage.setItem("age", this.value);
});
<select id="one" name="age">
<option value="0-50">Select Age</option>
<option value="0-4">0-4</option>
<option value="5-9">5-9</option>
<option value="10-14">10-14</option>
<option value="15-19">15-19</option>
</select>
And then retrieve the value in the other page as follows:
let age = (localStorage.getItem("age")) ? localStorage.getItem("age") : null;
You can define an onchange property with a callback function to set the value to a variable. Then pass it as params in the url or store them in localStorage.

Multi select onchange event jquery

I'm creating a form. I have two fields, 1. default value field and 2. preview field. Both are multiselect fields. The user will add the options to the multiselect manually. Whenever the user chooses an option in the default value, the same value should be shown as selected in the preview field. When the user removes one option, the same option should be unselected. This is how I've written the onchange event for this multiselect:
$("#MultiSelect_DefaultValues").change(function() {
alert($(this).val());
$("#MultiSelect_Preview").val($(this).val());
});
I get the correct value in the alert. But, in the preview field, there is no reaction. All the options available in the default value field are available in the preview field too. But, the options selected in the default value field is not selected in the preview field. What's wrong with this? What should I change, so that the changes in the default field reflects in the preview field too?
You said you are using select2 so execute like this:
$("#MultiSelect_DefaultValues").change(function () {
alert($(this).val());
var prevSelect = $("#MultiSelect_Preview").select2();
prevSelect.val($(this).val()).trigger('change');
});
The values on the option tags need to match for this, if I'm understanding correctly what you're trying to achieve that is.
e.g.
$("#MultiSelect_DefaultValues").change(function() {
console.log($(this).val());
$("#MultiSelect_Preview").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="MultiSelect_DefaultValues" multiple>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<select id="MultiSelect_Preview" multiple>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
You can provide multiple replacements by sending an int array to the select method.
$('#cars').val([1,3]);
//or $('#cars').selectpicker('val', [1,2,3]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="cars" id="cars" multiple>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
you can use this code
<script>
$("#MultiSelect_DefaultValues").change(function () {
$('select[id="MultiSelect_Preview"]').find('option[value=' + $(this).val() + ']').attr("selected", true);
});
</script>

Select value using jQuery in same order with select2

I have a select2 multiselect dropdown.
<select class="select2" multiselect>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
I want to select multiselect on page ready so I tried below code to achieve. But every time I got result in sorted form. But I want selected items in same order.
$('.select2').select2();
$(document).ready(function(){
$('.select2').val(['B','E','A']).trigger('change');
$("select").on("select2:select", function (evt) {
var element = evt.params.data.element;
var $element = $(element);
$element.detach();
$(this).append($element);
$(this).trigger("change");
});
})
Note: when I select manually, it's working fine. But on trigger, it's not working

Hide JQuery not working

I am trying to make a drop-down(B) menu that is hidden at first and when a different form(A) is completed, then this drop-down(B) menu is shown. However, when the page loads, the second drop-down(B) menu is not hidden. Code is below and stored in a php file
<h4>And What Type of Data Are You Focusing On?</h4>
<select name="library_type" id="library_type">
<option value="DNA"> DNA </option>
<option value = "RNA"> RNA </option>
<option value="WGS"> Whole Genome Sequences</option>
<option value="WXS">Whole Exome Sequences</option>
<option value="RNA-Seq">RNA-Seq</option>
<option value = "miRNA-Seq">miRNA-Seq</option>
<option value = "VALIDATION">VALIDATION</option>
<option value = "AMPLICON">AMPLICON</option>
<option value = "ChIP-Seq">ChIP-Seq</option>
<option value = "Bisulfite-Seq">Bisulfite-Seq</option>
<option value = "TARGET_60">TARGET_60</option>
<option value = "TARGET_50">TARGET_50</option>
<option value = "TARGET_61">TARGET_61</option>
<option value = "OTHER">OTHER</option>
</select>
<h4> What Condition are You Interested in? </h4>
<select name="tissueState" id="tissueState">
<option value = "Normal"> Normal </option>
<option value = "Tumor"> Tumor </option>
<option value = "Both"> Both </option>
</select>
<br><br>
<input type="submit" value="Show me Matches">
</form></center>
In a separate file, hideDropDownMenu.js, this is the content of that file.
$("#tissueState").hide();
$(document).ready(function)(){
$('#library_type').change(function(){
var value = $(this).val();
});
});
In the head of the .php file I have this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="hideDropDownMenu.js"></script>
Here is how the page looks
Your code is buggy...
First of all close correctly the document ready and change event.
From this } to this });
And this $(document).ready(function)(){ must change in $(document).ready(function(){
This is the corrected code:
<script>
$("#tissueState").hide();
$(document).ready(function(){
$('#library_type').change(function(){
var value = $(this).val();
});
});
</script>
Try it: https://jsfiddle.net/ougvw8kk/
In order to hide the dropdown during page load, you need to declare the hide statement inside document ready function.
$(document).ready(function)(){
$("#tissueState").hide();
$('#library_type').change(function(){
var value = $(this).val();
});
});

Modify subsequent dropdown list with jquery

I have a web form with multiple dropdown lists. I would like to only display options in the second list that share the same value as the selection in the first list.
<!-- Dropdown #1 -->
<div class="control-group">
<label class="control-label" for="select01">Select Tier</label>
<div class="controls">
<select id="select01">
<option value="all">All Tiers</option>
<option value="db">Database Tier</option>
<option value="app">Application Tier</option>
<option value="web">Web Tier</option>
</select>
</div>
</div>
<!-- Dropdown #2 -->
<div class="control-group">
<label class="control-label" for="select01">Select Audit Point</label>
<div class="controls">
<select id="select03">
<option value="all">Software Version</option>
<option value="all">Server OS, Memory, CPU</option>
<option value="all">High Availability</option>
<option value="db">DBMS Version</option>
<option value="db">DBMS Statistics</option>
<option value="db">DBMS Parameters</option>
<option value="db">DBMS Data File Growth</option>
<option value="db">Database Disk Structure</option>
<option value="db">Long Running SQL</option>
<option value="db">Security Data Growth Range</option>
<option value="db">Extraneous entries in System Tables</option>
<option value="db">Feed Error Orphans</option>
<option value="db">Position Detail Orphans</option>
<option value="db">Data Retention Policy</option>
<option value="db">Securities Added Daily</option>
<option value="db">Security Master Load</option>
<option value="db">SRM Purge</option>
<option value="db">Best Pricing Purge</option>
<option value="db">Partitioning</option>
<option value="db">DBMS Data/Log File Utilize Shared Disk</option>
<option value="db">DBMS Failover</option>
<option value="app">DBMS Client Version</option>
<option value="app">Star Engine IP Configuration</option>
<option value="app">Engine Count/Configuration</option>
<option value="app">STAR Engine Logging Interval</option>
<option value="app">PACE Engine Port Configuration</option>
<option value="app">PACE Server Logging</option>
<option value="app">PACE Engine Log Configuration</option>
<option value="app">STAR Engine Load Balancer Interval</option>
<option value="app">Engines Restarted Weekly</option>
<option value="app">Designated Master</option>
<option value="app">Cluster Managers Identical</option>
<option value="app">Uploader Shared Disk Space</option>
<option value="app">Custom Archive Rule Shared Disk Space</option>
<option value="app">App Server Clustering</option>
<option value="app">PACE Event Concurrency</option>
<option value="web">Homogenous Engine Configuration</option>
<option value="web">Log Levels</option>
<option value="web">Scheduler Purging</option>
<option value="web">Web Server Services Restarted Weekly</option>
<option value="web">Email Notification Basic Configuration</option>
<option value="web"n>Web Load Balancer Configuration</option>
<option value="web">Load Balancer Customizations</option>
<option value="web">Portal Shared Disk Space</option>
<option value="web">Message Center Shared Disk Space</option>
<option value="web">Message Center ID'S</option>
<option value="web">Schedule Service Config</option>
<option value="web">ePace is a client of Clustered App Servers</option>
<option value="web">Portal is a client of Clustered App Servers</option>
<option value="web">ESTAR is a client of Clustered Load Balancers</option>
<option value="web">ESTAR is a client of Clustered Engines</option>
<option value="web">ESTAR is a client of Clustered Report Export Services</option>
<option value="web">WebSync Configured</option>
<option value="web">Web Server Load Balancing Configured</option>
<option value="web">Shared Disk Dynamic Folder</option>
I need to be able to continuously change the list 1 selection, so I cannot .remove() unmatched options in the 2nd list. If I did remove them, I would then need to re-populate the 2nd list on each new selection from the 1st list.
Thank you for your help.
I have tested with your HTML-Code and works properly... You only have to modify this code so that there will be a filtered selection when loading the page.
jQuery(document).ready(function() {
var savedOptions = '';
savedOptions = jQuery('#select03').html(); //save the second dropdown-list
jQuery('#select01').change(function() {
var selectedValue = jQuery('#select01').val(); //After changing the value of the first dropdown, store this value inside a variable
jQuery('#select03').html(savedOptions); //restore the content of the 2nd dropdown
jQuery('#select03').children('option').each(function() {
if(jQuery(this).attr('value') != selectedValue) {
jQuery(this).remove(); //Compare and step through the 2nd dropdown and delete all unneccessary options
}
});
});
});
You can disable the options like so:
$("#select01").change(function() {
//Get value from the selected option
var filter = this.value;
//Loop thru second select options
$("#select02 option").each(function() {
//Enable the option (used for if the select changes values)
$(this).prop("disabled", false);
//Compare second select values to the initial selected value
if (this.value != filter) {
//Disable options that do not match
$(this).prop("disabled", true);
}
});
});
Demo: http://jsfiddle.net/QXhRy/
I suppose you could also completely remove the options as well, however, this would involve re-building the select each time you change the initial dropdown.
You cannot have duplicated option values inside the select element.
It is better you have a separate element that holds the options tag. And then replace the value with data-value attributes.
Try this
$('#select01').on('change', function() {
var $select03 = $('#select03'),
currValue = this.value;
$select03.empty();
var $options = $('.template option').filter(function() {
return $(this).data('value') === currValue
}).get();
$select03.append($options);
}).change();
Working Fiddle
Create a "map" of String arrays and populate from this as needed.
// initialize options on page load
var options = new Array();
options["all"] = new Array("A","B","C");
options["db"] = new Array("D","E","F");
function changeSecondDropDown(selectedValue)
{
// clear options from second drop down list
...
var optionsToAdd = options[selectedValue]
// loop through options and add them to second drop down list
...
}

Categories

Resources