onBlur event with selectize.js - javascript

I'm using the selectize.js package in my application (https://github.com/selectize/selectize.js) and i'm trying to cat the option selected by user using the onBlur event withou succeed. Bellow is a code as example:
<html>
<head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.css" />
<div class="demo">
<div class="control-group">
<label for="select-beast-single-disabled">Onblur:</label>
<select id="select-beast-single-disabled" class="demo-default" placeholder="Select a person...">
<option value="">Select a person...</option>
<option value="1">Arnold</option>
<option value="2" selected>Nikola Tesla</option>
</select>
</div>
<script>
$('#select-beast-single-disabled').selectize({
create: true,
sortField: {field: 'text'},
onBlur: function () {
input = document.getElementById('select-beast-single-disabled');
console.log(input.value)
}
});
</script>
</div>
</body>
</head>
</html>
Steps to reproduce:
Inspect select via console
Select "Arnold"
In console, the console.log will print ""
Then, if you press again, will print 1
Expected result:
In the first time that we select the option, the selectize must "blur" the selectize and log the right option, no "".
Actual result:
We have to click twice on the same option to update the value in console.log with the right option.
Is there any workaround for it? Thank you in advance !

Have you tried onChange(value) instead of onBlur()? Seems like that does exactly what you desire.
<html>
<head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.css" />
<div class="demo">
<div class="control-group">
<label for="select-beast-single-disabled">Onblur:</label>
<select id="select-beast-single-disabled" class="demo-default" placeholder="Select a person...">
<option value="">Select a person...</option>
<option value="1">Arnold</option>
<option value="2" selected>Nikola Tesla</option>
</select>
</div>
<script>
// save select to variable
var $select = $('#select-beast-single-disabled').selectize({
create: true,
sortField: {field: 'text'}
});
// fetch the instance
var selectize = $select[0].selectize;
// attach blur event
selectize.on('blur', function onBlur() {
// get the value from selectize instance.
console.log(selectize.getValue());
});
</script>
</div>
</body>
</head>
</html>

Related

Bootstrap Multiselect showing 0 selected even if i select multiple values

When I select multiple values it is showing 0 selected in the label. I think there is something wrong with the Javascript. Take a look at this image: https://photos.app.goo.gl/5Dxwt5gvuE277Uyw9
I also want to store all the values in my database. Should I store all the values in an array and then pass it to PHP?
$(document).ready(function() {
$("#multifield1 option:selected").each(function() {
console.log(this.text);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<div class="col-lg-6">
<div class="form-group">
<strong>Area of Interest:</strong>
<select id="multifield1" class="multiselect-ui form-control" multiple="multiple">
<option value="X">X</option>
<option value="Y">Y</option>
<option value="Z">Z</option>
</select>
</div>
</div>
You need to use onChange event handler:
$('#multifield1').multiselect({
onChange: function(option, checked) {
var selectedItems = $("#multifield1 option:selected").length;
console.log('selected items: ' + selectedItems);
}
});
$('button.btn.btn-info').on('click', function(e) {
var selectedItems = $("#multifield1 option:selected").length;
console.log('Info btn: selected items: ' + selectedItems);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<button type="button" class="btn btn-info">Info</button>
<div class="col-lg-6">
<div class="form-group">
<strong>Area of Interest:</strong>
<select id="multifield1" class="multiselect-ui form-control" multiple="multiple">
<option value="X">X</option>
<option value="Y">Y</option>
<option value="Z">Z</option>
</select>
</div>
</div>
This code is placed in your $(document).ready event handler, meaning it will only execute when the page is first loaded. And I assume that initially on page load, nothing is selected yet.
You could listen for the select's onchange event and use your code inside the handler, so that the code runs every time the select values are changed.
$(document).ready(function() {
$("#multifield1").on("change", function() {
$(this).find("option:selected").each(function() {
console.log(this.text);
});
})
});
To send values in an array to PHP you should set "name" attribute of your select tag like this:
<select name="test[]" id="multifield1" class="multiselect-ui form-control" multiple="multiple">
Also, don't forget to make your form in a tag and add a submit button.

How to save chosen Jquery selected options at same page even stay at same place after refresh the pagea

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
</head>
<body>
<form method="POST" name="" action="">
<select class="chzn-select" multiple="true" name="time" style="width:300px;" id="rememberSelected">
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="02:30">02:30</option>
<option value="03:00">03:00</option>
<option value="30:30">03:00</option>
<option value="04:30">04:30</option>
<option value="05:00">04:30</option>
</select>
<button type="button">Save</button>
</form>
<script type="text/javascript">
$(function() {
$(".chzn-select").chosen();
});
</script>
<script>
$("#rememberSelected").val(localStorage.getItem("selected") || 1);
$("#rememberSelected").on("change", function() {
localStorage.setItem("selected", $(this).val());
});
</script>
</body>
</html>
how to save selected options at same place after click on the save button using chosen jquery even if I'm refresh the page selected option should stay at same place.
Store the selected option into localStorage and retrieve it upon page load.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
if(!!localStorage.getItem("selected")) {
$("#rememberSelected").val(localStorage.getItem("selected").split(",")).trigger("chosen:updated");
}
$("button").on("click", function() {
localStorage.setItem("selected", $("#rememberSelected").val());
});
You can save your state to localStorage
<script>
if (localStorage['select-state']) {
$( "select" ).val(JSON.parse(localStorage['select-state']));
}
$( "select" ).change(function() {
localStorage['select-state'] = JSON.stringify($(this).val());
});
</script>

Edit jquery editable select

I need a little help for this script. It is a jQuery Plugin that converts a select into an text field with suggestions. When I use it in a form it submits the text not the value.
How can I use get the value of options not the text?
Example:
<link rel="stylesheet" href="https:rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css">
<form action="http://stackoverflow.com/questions/38437449/edit-jquery-editable-select/" method="get">
<select id="basic" name="basic">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<input type="submit" value="Submit" />
</form>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<script>
window.onload = function () {
$('#basic').editableSelect();
}
</script>
It should send "000" not "zero", and results in domian.com/page.php?data=000 not domian.com/page.php?data=zero.
UPDATE:
Another way in order to get the value you are looking for is:
$('#basic').siblings('.es-list').find('li.selected').data('value')
For the text instead you can use:
$('#basic').siblings('.es-list').find('li.selected').text()
Old answer:
The plugin jquery-editable-select exposes an event called "onSelect".
So you need to attach an event handler for this event and listen for the form submit:
$(function () {
var selectedEleValue = null;
$('#basic').editableSelect({
onSelect: function (element) {
selectedEleValue = element.val();
console.log('The val is: ' + element.val() + ' The text is: ' + element.text());
}
});
$('form[action="http://stackoverflow.com/questions/38437449/edit-jquery-editable-select/"]').on('submit', function(e) {
if (selectedEleValue != null) {
$('#basic').val(selectedEleValue);
}
})
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link href="https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">
<script src="https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<form action="http://stackoverflow.com/questions/38437449/edit-jquery-editable-select/" method="get">
<select id="basic" name="basic">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<input type="submit" value="Submit" />
</form>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<link href="./jquery-editable-select-master/dist/jquery-editable-select.min.css" rel="stylesheet">
<script src="./jquery-editable-select-master/dist/jquery-editable-select.min.js"></script>
<script type="text/javascript">
$(function () {
$('#basic').editableSelect();
});
function abc(){
var basic_text = document.getElementById('basic').value;
var basic_value = $('#basic').siblings('.es-list').find('li.selected').attr('value');
console.log(basic_text);
console.log(basic_value);
}
</script>
</head>
<body>
<form method="post" id="form_id" action="">
<select id="basic" name="basic">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<button type="button" onclick="abc();">Submit</button>
</form>
</body>
</html>

Change text for `option` in a `select` with jquery

So, i´m trying to change a text for an option with jquery.
HTML
<select id="mySelect">
<option value="change me">Change me</option>
</select>
JS
$(document).ready(function() {
$('#mySelect').select2();
$(document).find('option[value="change me"]').text('Changed');
})
Well, nothing happends.
It´s important to change the text "live".
Fiddle: https://jsfiddle.net/gmt22ffL/2/
Is this even possible?
I´m using Jquery plugin "Select2" for my select.
It works perfectly fine. But let's try adding Select2 and see:
$(document).ready(function() {
$('option[value="change me"]').text('Changed');
$('#mySelect').select2();
});
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<select id="mySelect">
<option value="change me">Change me</option>
</select>
Swapping the lines work.
Destroying and changing:
$(document).ready(function() {
$('#mySelect').select2();
$('#mySelect').select2("destroy");
$('option[value="change me"]').text('Changed');
$('#mySelect').select2();
});
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<select id="mySelect">
<option value="change me">Change me</option>
</select>

If a Select All option is Checked then display a div using bootstrap multiselect

After Selecting "Select All" option in the drop down list,I'll click on a generate graph button.Then I want to display a chart containing of all options in the drop down list in a particular div using bootstrap multi-select.
My code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Multi Select Dropdown with Checkboxes</title>
<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-2.3.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<div id="PiDiv"></div>
<div id="AllDiv"></div>
<form id="form1">
<div style="padding:20px">
<label>Select Country</label>
<select id="selectId" multiple="multiple">
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="Germany">Germany</option>
<option value="Nepal">Nepal</option>
<option value="Iraq">Iraq</option>
<option value="China">China</option>
</select><br /><br />
<input type="button" id="btnget" value="Get Selected Values" />
<script type="text/javascript">
$(function() {
$('#selectId').multiselect({
includeSelectAllOption: true
});
$('#btnget').click(function() {
alert($('#selectId').val());
if($('#selectId').val() == "India"){
$("#PiDiv").load("/home/divya/html_docs/pi.html");
}
})
});
</script>
</div>
</form>
</body>
</html>
I'm able to select one option and display its corresponding chart.But for select all option,I'm not getting how to display a div after clicking on a generate graph button.Can anyone please suggest me on this issue ...
try this option. Change the html to below and replace your URL in data-url
<select id="selectId" multiple="multiple">
<option value="India" data-url="<!-- URL -->">India</option>
<option value="Japan" data-url="<!-- URL -->">Japan</option>
<option value="Germany" data-url="<!-- URL -->">Germany</option>
<option value="Nepal" data-url="<!-- URL -->">Nepal</option>
<option value="Iraq" data-url="<!-- URL -->">Iraq</option>
<option value="China" data-url="<!-- URL -->">China</option>
</select>
jQuery Code
$('#btnget').click(function() {
$("#PiDiv").empty();
$('#selectId option:selected').each(function(index,elem){
if(typeof $(elem).data('url') != "undefined"){
$.get( $(elem).data('url'), function( data ) {
$("#PiDiv").append(data);
});
}
});
})

Categories