jQuery select link not working on Chrome - javascript

I want to have an option in select that takes a user to other page after clicking it.
Below function works on Edge and Mozilla, on Chrome not:
<select>
<option value="#Url.Action("Home")" id="some-id"> Take me somewhere
</option>
</select>
<script>
$('#some-id').click(function () {
window.location.href = this.value;
});
</script>
Please help!

I'd rewrite your code:
<select id='some-id'>
<option value="#Url.Action("Home")" > Take me somewhere
</option>
</select>
<script>
$('#some-id').on('change', function () {
window.location.href = this.value;
});
</script>

You must take a value from select Element. That way you can check if select value has changed and take user selected value.
<select id='some-id'>
<option value="#Url.Action("Home")" > Take me somewhere
</option>
</select>
<script>
$('#some-id').on('change', function (event) {
window.location = event.target.value;
});
</script>
P.s.: Better not to use this keyword but take it from event target. As using this can get You in trouble.

Related

Dropdown in HTML is empty at initialization due to Javascript

I've created in an html webpage a dropdown with four options. It worked well but I realized that when the page was refreshed, the value would reset itself to the first option. Since I wanted the user's choice to be kept in memory, I added a javascript code snippet that I found somewhere.
It works very well, except that at the initialization the default value of the dropdown is an empty field.
I would need the first option to be displayed at initialization.
I guess it's easy but I don't know JavaScript at all. Could you please help?
Here is what the code looks like:
<select name="options" id='dropdown'>
<option value="1">1st Option</option>
<option value="2">2nd Option</option>
<option value="3">3rd Option</option>
<option value="4">4th Option</option>
</select>
<!-- The script below helps to keep in memory the dropdown value after the page has been refreshed -->
<script type="text/javascript">
var selectedItem = sessionStorage.getItem("SelectedItem");
$('#dropdown').val(selectedItem);
$('#dropdown').change(function() {
var dropVal = $(this).val();
sessionStorage.setItem("SelectedItem", dropVal);
});
</script>
I think you should check if SessionStorage Key exists or not.
I have created working example of your code : https://jsfiddle.net/vieckys/Lwv1n8p7/7/
Here is HTML Markup:
<select name="options" id='dropdown'>
<option value="0" selected>--- select here ---</option>
<option value="1">1st Option</option>
<option value="2">2nd Option</option>
<option value="3">3rd Option</option>
<option value="4">4th Option</option>
</select>
and JS Code
let selectedItem = sessionStorage.getItem("SelectedItem");
if (selectedItem) {
$('#dropdown').val(selectedItem);
} else {
$('#dropdown').val(0);
}
$('#dropdown').change(function() {
let dropVal = $(this).val();
sessionStorage.setItem("SelectedItem", dropVal);
});
Let me know if you face any issue with this.
Based on your scenario, you can explicitly trigger the change event after the value is set for the dropdown using trigger('change') on the select dropdown. This will run the change function and will save the initial value in the sessionStorage. So, add this line of code, $('#dropdown').trigger('change') something like:
<script type = "text/javascript" >
var selectedItem = sessionStorage.getItem("SelectedItem");
$('#dropdown').val(selectedItem);
$('#dropdown').change(function() {
var dropVal = $(this).val();
sessionStorage.setItem("SelectedItem", dropVal);
});
$('#dropdown').trigger('change'); // trigger the change explicitly
</script>

How do I get a child attribute from a e.currentTarget.value JQuery

I am trying to get an attribute from the child of the the currentTarget. I have tried this,
(e.currentTarget.child.attr("data-english")
I have googled it and have had no luck finding anything useful, maybe its me being new with code I might be looking up the wrong thing.
Here is the HTML
< select class="form-control" id="select_fundFamily" name="select_fundFamily" autocomplete="off" >
< option value="stuff" data-english="english" data-family-locallang="model" >
At the moment in JQuery, the e.currentTarget.value; is showing the select element.
Can someone please kindly advise me in what path to take to solve this issue?
For the value of the selected option in a select, you can use
$(e.currentTarget).find(':selected').attr("data-english");
Run the snippet below to see it work
$(document).ready(function(){
$('select').change(function(e){
var eng = $(e.currentTarget).find(':selected').attr("data-english");
$('body').append(eng);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select_fundFamily">
<option selected disabled>Select something</option>
<option value="stuff1" data-english="english1" >1</option>
<option value="stuff2" data-english="english2" >2</option>
<option value="stuff3" data-english="english3" >3</option>
<option value="stuff4" data-english="english4" >4</option>
<option value="stuff5" data-english="english5" >5</option>
</select>
If you try to determine the selected option's attribute. A simple solution is:
var dataEnglish = $('#select_fundFamily option:selected').attr('data-english'); // dataEnglish = english
currentTarget will respond any element that event listener triggered the event. In your case, i think you want to use e.target to target the right element.
$("select#select_fundFamily").on('click','option', function(e) {
e.preventDefault();
$(e.target).attr('data-english'); // you can use $(this) instead
//something else
});

How to disable <select> based on other <select> on Select2.js

i'm having a little trouble with disabling a "select" input.
I need to disable "cidade" whenever nothing is selected on "estado".
here's my code:
<select id="estado" class="select_customized">
<option></option>
<option value="sp">São Paulo</option>
<option value="mg">Minas Gerais</option>
<option value="rj">Rio de Janeiro</option>
</select>
<select id="cidade" class="select_customized">
<option></option>
<option value="sao-paulo">São Paulo</option>
<option value="minas-gerais">Minas Gerais</option>
<option value="rio-de-janeiro">Rio de Janeiro</option>
</select>
And here's the script i'm using:
$("#cidade").select2("enable", false);
$("#estado").on('change',function(){
var is_empty = $('#estado').is(":empty");
if(is_empty){
$("#cidade").select2("enable", false);
}
else {
$("#cidade").select2("enable", true);
}
});
this kinda works, but whenever i choose something on the "estado" input, and clear it again, "cidade" does not disable again... any suggestions?
You probably want to use the select2 call to check if the selection box is empty, instead of going into the original #estado box you created (since that is hidden by select2).
Your call:
var is_empty = $('#estado').is(":empty");
then can be changed to something like:
var is_empty = $('#estado').select2("val") == "";
and that did the job for me. Note that the actual comparison above will differ a bit depending on for example if you are using a multi-valued selection box.
I think is that you need actually. You just need to set the .on('change') to make it works, like this fiddle.
UPDATE: easier than I thought.
http://jsfiddle.net/fczo7tLq/2/
$("#cidade").prop('disabled', 'disabled');
$("#estado").on('change', function() {
var that = $("#estado option:selected").val();
if (that !== "empty") {
$("#cidade").prop('disabled', false);
} else {
$("#cidade").prop('disabled', 'disabled');
}
});

Two select boxes with one function in Jquery

I have here two select boxes. The process is like this http://www.w3schools.com/ajax/ajax_database.asp. What I need to display only the value between the two select boxes. How I can do that in one function? Any help will appreciate.
<script>
function showUser(str) {
var $txtHint = $('#txtHint');
if (str=="") {
$txtHint.html('');
return;
}
$txtHint.load('ajax.php?q='+str)
}
</script>
<select name="customers" id="customers" onchange="showUser(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
<select name="city" class="city">
<option selected="selected">--Select City--</option>
</select>
First, take the function that you're calling inside change(), and declare it separately. Then, call .change() on that function twice.
E.g.
$(document).ready(function() {
var myChangeFunction = function() {
var city = $(".city").val();
var customer = $("#customer").val();
if (city && customer) {
// do something only if both are set
}
};
$(".city").change(myChangeFunction);
$("#customer").change(myChangeFunction);
});
I think I understood what you need.
You need both selects to call the same function onchange.
That function will get some info, and load it. You need it to load it in different places regarding which was the select that changed.
If that's what you need, check this fiddle:
http://jsfiddle.net/hige/4878B/
Remember to uncomment the .load() line, and delete the console.log() one.
Hope it helps!

Select box to change url

I want to use a select to change the query on the end of a url to change it's sort options. e.g:
<select id="sort">
<option value="?order_by=date">Recent</option>
<option value="?order_by=random">Popular</option>
<option value="?order_by=random">Random</option>
<option value="">Staff Picks</option>
</select>
so for example by default a list of posts will be shown by date and then if a user chooses an option it will reload the page with the query string on the end of the URL. If possible looking to use jQuery to achieve this. Thanks.
Attach a handler to the change event for the select box that adds the value of the selected option to the current window location with everything after the ? snipped off:
$('#sort').change(function(e){
var locAppend = $(this).find('option:selected').val(),
locSnip = window.location.href.split('?')[0];
window.location.href = locSnip + locAppend;
});
Here's an example ࢐ (it doesn't redirect, but you get the idea...)
To have the appropriate value selected on page load, you can run the following function before you bind the change handler:
function selectCurSort() {
var match = window.location.href.split('?')[1];
$('#sort').find('option[value$="'+match+'"]').attr('selected',true);
}
selectCurSort();
I'm not quite sure why you aren't just using something like:
<form method="GET">
<input type="hidden" name="query" value="..." />
<select id="sort" name="order_by">
<option value="date">Recent</option>
<option value="popular">Popular</option>
<option value="random">Random</option>
<option value="staff">Staff Picks</option>
</select>
<input type="submit" value="Sort" />
</form>
And, for the JS, if any, just:
$('#sort').change(function() {
$(this).parents('form').submit();
});
Then, you don't require anyone to have JavaScript enabled.
Like this?
$("#sort").change(function(){
window.location = $(this).find("option:selected").val();
});
Add
onchange="if (this.value && /^\?/.test(this.value)) location = location.path + this.value"
to your <select>.
You might want to put a blank option at the top too.
$(function() {
$("#sort").change(function() {
var myVal = $(this).val();
window.location = "www.mywebsite.com/"+ myVal;
});
var qs = window.location.pathname;
$("#sort option").each(function() {
if(qs.contains($(this).val()))
$(this).addAttr("selected","selected");
});
});
Try that.

Categories

Resources