jquery mobile "select" does't append or remove "options" - javascript

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).bind('mobileinit',function(){
$.mobile.pushStateEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>jQuery.noConflict(true);</script>
<fieldset id="When" style="padding:0px; padding-top:5px; margin:0px; margin-top:5px;">
When
<select id="Dayy" onchange="DayChange()" data-native-menu="false">
<option value="12">Today</option>
<option value="13">Tomorrow</option>
<option value="14">In 2 days</option>
</select>
</fieldset>
<fieldset id="Time" style="padding:0px; margin:0px;">
Time
<select id="Timee" data-native-menu="false">
<option value="21">Now</option>
<option value="22">In few hours</option>
<option value="23">All Day</option>
<option value="24">Morning</option>
<option value="26">Noon</option>
<option value="28">Afternoon</option>
<option value="29">Evening</option>
<option value="31">Midnight</option>
</select>
</fieldset>
<script type="text/javascript">
function DayChange() {
var e = document.getElementById("Dayy");
var value = e.options[e.selectedIndex].value;
if (value != '12'){
$("#Timee option[value='21']").remove();
$("#Timee option[value='22']").remove();
}
else if (value == '12'){
$("#Timee").append('<option value="21">Now</option>');
$("#Timee").append('<option value="22">In few hours</option>');
}
}
</script>
When selecting "Tomorrow" from the first select (Dayy), "Now" and "In few hours" aren't removed, but when I open the second select (Timee) and select any option, "Now" and "In few hours" are removed. Same for the append !
Any solution ?
I tried using
$('#Timee').selectmenu("refresh", true); and
$('#Timee').selectmenu().selectmenu("refresh", true); also tried
$('#Timee').trigger("change");
but nothing worked for me! When adding data-role="none" it worked well but the jquery design disappear
What I want is that when I click Tomorrow -> "Now" and "In few hours" disappear and when I click today they reappear.
That the design I want to conserve
And that when select open

The problem seems to be in your onChange="DayChange()" call.
I changed the code to use a JQuery event, and it works:
$("#Dayy").on("change", function() {
DayChange();
})
JSFiddle: https://jsfiddle.net/L8da7qaz/1/

<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script>
$(document).bind('mobileinit',function(){
$.mobile.pushStateEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>jQuery.noConflict(true);</script>
it was just an order problem, I just changed the script orders and added $("#Timee").selectmenu("refresh",true); and voila it worked like a charm :D

Related

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>

Hiding select list option values while using jQuery Chosen

I have created a simple app containing <select> lists which hide() or show() option values based on previous selections.
There are two lists, one with vehicle Makes and the other with vehicle Models. When a certain Make is selected, i.e. BMW, the next Make <select> appears only showing BMW models. And vice versa with Audi and so on.
Within the Models list, I have attached an ID to every <option> value and show or hide those <option> values based on previous selections. For example if BMW is selected, it will hide the two Audi model <option>'s, Q1 and Q3. If Audi is selected, it will hide the two BMW model <option>'s, X1 and X2.
I was successful in achieving this basic functionality; however, when I integrated jQuery's Chosen, it no longer worked. I really like Chosen and once I build out this app it will be very useful, so I would love to achieve the same functionality with it integrated.
Here is the simple code file:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
<style type="text/css">
.chosen-select {width:200px}
.hidden {display: none;}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".chosen-select").chosen({
disable_search_threshold: 4
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var $models = $('#s2');
var $drivetrain = $('#s3');
var $bmwmodels = $('#X1, #X2');
var $audimodels = $('#Q1, #Q3');
$('#s1').change(function() {
var selectedValue = $(this).val();
if(selectedValue == 'BMW') {
$audimodels.hide();
$drivetrain.parent().hide();
$models.parent().show();
$bmwmodels.show();
}
else if (selectedValue == 'AUDI') {
$bmwmodels.hide();
$drivetrain.parent().hide();
$models.parent().show();
$audimodels.show();
}
else {
$bmwmodels.hide();
$audimodels.hide();
$models.parent().hide();
$drivetrain.parent().hide();
}
});
//Hide onload
function hide() {
$models.parent().hide();
$drivetrain.parent().hide();
$bmwmodels.hide();
$audimodels.hide();
}
// call hide AFTER .chosen() has been invoked on the visible elements
hide();
});
</script>
</head>
<body onload="hide()">
<table>
<tr>
<td>
<select data-placeholder="Select Brand" class="chosen-select" id="s1">
<option disabled selected></option>
<option value="BMW">BMW</option>
<option value="AUDI">AUDI</option>
<option value="nothing" id="nothing">Nothing</option>
</select>
</td>
</tr>
<tr>
<td>
<select data-placeholder="Select Model" class="chosen-select" id="s2">
<option disabled selected></option>
<option value="nothing" id="nothing">Nothing</option>
<option value="X1" id="X1">X1</option>
<option value="X2" id="X2">X2</option>
<option value="Q1" id="Q1">Q1</option>
<option value="Q3" id="Q3">Q3</option>
</select>
</td>
</tr>
</table>
</body>
</html>
Any help would be greatly appreciated! Thanks so much.
$(".chosen-select").trigger('chosen:updated'); You need to notify Chosen that your options have updated. This code updated Chosen to take care of updated options.
One thing to note however that it dont work to remove pre-select, you need to find solution within Chosen on how to remove pre-selection.
$(document).ready(function() {
var $models = $('#s2');
var $drivetrain = $('#s3');
var $bmwmodels = $('#X1, #X2');
var $audimodels = $('#Q1, #Q3');
console.log( $bmwmodels, $audimodels);
$('#s1').change(function() {
var selectedValue = $(this).val();
if (selectedValue == 'BMW') {
$audimodels.hide();
$drivetrain.parent().hide();
$models.parent().show();
$bmwmodels.show();
} else if (selectedValue == 'AUDI') {
$bmwmodels.hide();
$drivetrain.parent().hide();
$models.parent().show();
$audimodels.show();
} else {
$bmwmodels.hide();
$audimodels.hide();
$models.parent().hide();
$drivetrain.parent().hide();
}
$(".chosen-select").trigger('chosen:updated');
});
//Hide onload
function hide() {
$models.parent().hide();
$drivetrain.parent().hide();
$bmwmodels.hide();
$audimodels.hide();
}
// call hide AFTER .chosen() has been invoked on the visible elements
$(".chosen-select").chosen({
disable_search_threshold: 4
});
hide();
});
.chosen-select {
width: 200px
}
.hidden {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
</head>
<body>
<table>
<tr>
<td>
<select data-placeholder="Select Brand" class="chosen-select" id="s1">
<option disabled selected></option>
<option value="BMW">BMW</option>
<option value="AUDI">AUDI</option>
<option value="nothing" id="nothing">Nothing</option>
</select>
</td>
</tr>
<tr>
<td>
<select data-placeholder="Select Model" class="chosen-select" id="s2">
<option disabled selected></option>
<option value="nothing" id="nothing">Nothing</option>
<option value="X1" id="X1">X1</option>
<option value="X2" id="X2">X2</option>
<option value="Q1" id="Q1">Q1</option>
<option value="Q3" id="Q3">Q3</option>
</select>
</td>
</tr>
</table>
</body>
</html>

Chosen.js Multiple select option

Is there a way to set up chosen on a multiple select box so that when items are selected just the option values are shown instead of the option name by default.
<select multiple>
<option value="A">America</option>
<option value="B">Barbados</option>
<option value="C">Canada</option>
</select>
So whenselected, the input box shows "A", "B" and or "C"
Thanks in advance
Make sure you are using the correct .js and .css files.
This works for me:
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.css">
</head>
<body>
<select multiple style="width: 500px;">
<option value="A">America</option>
<option value="B">Barbados</option>
<option value="C">Canada</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.jquery.min.js"></script>
<script>
$(document).ready(function() {
$('select').chosen();
});
</script>
</body>
In this example are used the external resources from cdnjs.cloudflare.com:
3.1.0/jquery.min.js
1.6.1/chosen.css
1.6.1/chosen.jquery.min.js

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>

Selecting a value in drop down list using javascript

A] Summary of the problem:
Trying to pre-select a users country on page load
B] Details:
1] I am using maximinds javascript to find out a users county.
2] I have a drop down list which contains a list of 225 or so countries.
3] Inside the javascript section of my HTMLr page, I am trying to select the users country from the drop-down list.
But the country is not getting selected
C] Code excerpt:
<select name="country_name" id="id_country_name">
<option value="" selected="selected">---------</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aring land Islands">Aring land Islands</option>
</select>
<!-- including the geoip javascript library -->
<script src="http://j.maxmind.com/app/geoip.js" type="text/javascript"></script>
<!-- By default, we will select users country -->
<script type="text/javascript" language="JavaScript">
document.getElementById(geoip_country_name()).selected = true
</script>
Thanks,
[Edit#1]
Tried the following jquery code, but this isnt populating the drop-down list:
<!-- including the geoip javascript library -->
<script src="http://j.maxmind.com/app/geoip.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("option[value='" + geoip_country_name() + "']").attr('selected', 'selected');
});
</script>
[Edit#2]
Tried the $("#id_country_name").val(geoip_country_name());,
<div id="userDataForm">
<form method="POST" action="/UserReporting">
<table>
<!-- Printing the forms for users country, city -->
<tr><th><label for="id_country_name">Country name:</label></th><td>
<select name="country_name" id="id_country_name">
<option value="" selected="selected">---------</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aring land Islands">Aring land Islands</option>
<option value="Albania">Albania</option>
</select>
</td></tr>
<tr><th>
<label for="id_city_name">City name:</label></th><td><input type="text" name="city_name" id="id_city_name" /></td></tr>
</table>
<input type="submit" name="report_up" value= "Report Up">
<input type="submit" name="report_down" value= "Report Down">
</form>
<!-- including the geoip javascript library -->
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script src="http://j.maxmind.com/app/geoip.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function () {
$("#id_country_name").val(geoip_country_name());
});
</script>
The document.getElementById call would only work if each <option> in your HTML had the country name as the id (replacing spaces with "_" or something similar):
<select name="country_name" id="id_country_name">
<option value="" selected="selected">---------</option>
<option id="Afghanistan" value="Afghanistan">Afghanistan</option>
<option id="Aring_land_Islands" value="Aring land Islands">Aring land Islands</option>
</select>
However, I'd lean towards this approach with jquery, as it doesn't require giving every option its own id:
$(function () {
$("#id_country_name").val(geoip_country_name());
});
Try
document.getElementById('id_country_name').selectedIndex=index;
where index is an integer corresponding to the selection you want.

Categories