Bit of a weird one, not sure if this is possible or not.
The system I am working on has a sort by select element which has 'Recommended Products' as the selected option on load as this is the order in which they'd like the products to be when a user hits the page, but they also want it to say 'Sort By' be default so that it's obvious this is a sort by element. Unfortunately I can't change the core HTML, I can only modify via jQuery/Javascript.
Just wondering if there was a way to do this with jQuery or not, as the method I've tried have interfered with the default select so far. Is it even possible to have a default placeholder as well as another option selected to dictate the load in state?
Cheers!
Current HTML
<select id="sort-by-select">
<option value="#" selected="">Recommended Products</option>
<option value="#">Price (High to Low)</option>
<option value="#">Price (Low to High)</option>
<option value="#">Newest In</option>
<option value="#">Most Popular</option>
</select>
Desired HTML
<select id="sort-by-select">
<option value="#" selected="" disabled="disabled">Sort By</option>
<option value="#" selected="">Recommended Products</option>
<option value="#">Price (High to Low)</option>
<option value="#">Price (Low to High)</option>
<option value="#">Newest In</option>
<option value="#">Most Popular</option>
</select>
As pointed out in the comments, you can only have one default/selected option. What you could do instead is add a label via jQuery, using .insertBefore():
$(function() {
var $label = $('<label>').text('Sort By:').attr('for', 'sort-by-select');
$label.insertBefore($('#sort-by-select'));
});
label { margin-right: 5px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sort-by-select">
<option value="#" selected="">Recommended Products</option>
<option value="#">Price (High to Low)</option>
<option value="#">Price (Low to High)</option>
<option value="#">Newest In</option>
<option value="#">Most Popular</option>
</select>
Alternatively, you could prepend "Sort by" to every option in the select, using .text():
$(function() {
$('#sort-by-select option').text(function () {
return 'Sort by: ' + $(this).text();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sort-by-select">
<option value="#" selected="">Recommended Products</option>
<option value="#">Price (High to Low)</option>
<option value="#">Price (Low to High)</option>
<option value="#">Newest In</option>
<option value="#">Most Popular</option>
</select>
Related
I have a list of countries like this:
The list is very extensive. I need to be able on a button click to move (focus) to the specified country.
There are many threads in StackOverflow but none of them worked. For example I tried this:
var code = 40;
$('#id_resource-regions').val(code).scrollTop(160);
There is no response and no error/warnings in the developers tool.
Note that the list is created using django forms and templates.
Select the option element you are looking for.
Get the offset top position using .offset(), of the selected option element.
Get the offset top of the select element.
Use .scrollTop() to scroll to the desired option.
Here is an example
var btn = $('button')
var select = $('select')
btn.on('click', function() {
var option = select.find("option:contains('item-30')");
var optionTop = option.offset().top
var selectTop = select.offset().top;
select.scrollTop(select.scrollTop() + (optionTop - selectTop));
option.prop('selected', true)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="select" multiple="multiple">
<option value="">item-1</option>
<option value="">item-2</option>
<option value="">item-3</option>
<option value="">item-4</option>
<option value="">item-5</option>
<option value="">item-6</option>
<option value="">item-7</option>
<option value="">item-8</option>
<option value="">item-9</option>
<option value="">item-10</option>
<option value="">item-11</option>
<option value="">item-12</option>
<option value="">item-13</option>
<option value="">item-14</option>
<option value="">item-15</option>
<option value="">item-16</option>
<option value="">item-17</option>
<option value="">item-18</option>
<option value="">item-19</option>
<option value="">item-20</option>
<option value="">item-21</option>
<option value="">item-22</option>
<option value="">item-23</option>
<option value="">item-24</option>
<option value="">item-25</option>
<option value="">item-26</option>
<option value="">item-27</option>
<option value="">item-28</option>
<option value="">item-29</option>
<option value="">item-30</option>
<option value="">item-31</option>
<option value="">item-32</option>
<option value="">item-33</option>
<option value="">item-34</option>
<option value="">item-35</option>
<option value="">item-36</option>
<option value="">item-37</option>
<option value="">item-38</option>
<option value="">item-39</option>
<option value="">item-40</option>
</select>
<button>move to item 30</button>
I found this simple jQuery Star rating system that I'd like to use, I am following http://jsfiddle.net/ code in my website and it's working fine for one star rating system not for multiple and I have multiple star rating system on one page in my website.
Here is jsfiddle link: http://jsfiddle.net/IrvinDominin/eeG86/
<select name="my_input" id="rating_simple">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
<select name="my_input" id="rating_simple">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
<select name="my_input" id="rating_simple">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
In above link I had like jQuery drop down but this is working only for one rating system on one page. My problem is I have multiple star rating system on one page.
Your first problem is the fact that you're using IDs, let's alter your markup for each select to use a class:
<select name="my_input" class="rating_simple">
Now we need to update your jQuery to reflect the change (using . instead of #).
Finally, in your change method, you refer to the star rating system using $(".webwidget_rating_simple"), but now we have multiple of these in the DOM, so we need to refer to the one adjacent to the current select that you're changing, using $(this).next(".webwidget_rating_simple").
So finally, your jQuery will look like this:
EDIT we actually need to setup each dropdown individually, this is to prevent the issue within the plugin that will select all dropdowns if you click on one star (it's better to alter the calling code than it is to update the plugin).
$(".rating_simple").each(function () {
$(this).webwidget_rating_simple({
rating_star_length: '5',
rating_initial_value: '',
rating_function_name: ''
});
});
$('.rating_simple').change(function () {
$(this).next(".webwidget_rating_simple").children("li").css('background-image', 'url(http://www.jhwebdesigner.com/rating-system/rating-system//nst.gif)');
$(this).next(".webwidget_rating_simple").children("li").slice(0,this.value).css('background-image', 'url(http://www.jhwebdesigner.com/rating-system/rating-system//sth.gif)');
});
DEMO
Try this. use different id and name.
<select name="my_input1" id="rating_simple1">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
<select name="my_input2" id="rating_simple2">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
<select name="my_input2" id="rating_simple2">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
I have a main drop down list which contains state names, when i select each state name i need to display the city names in a select box, but the select box name should be same because when i give different select box with same name the data is not storing in sql database. so i need to load the specific city names on each state select. any option
<option value="">Select your Location</option>
<option value="CHENNAI">CHENNAI</option>
<option value="GURGAON">GURGAON</option>
</select>
<select name="site">
<option value=""> Select Site </option>
<option value="City1"> City1</option>
<option value="City2"> City2</option>
<option value="City3"> City3</option>
<option value="City3"> City3</option>
</select>
<select name="site">
<option value=""> Select Site </option>
<option value="City1"> City1</option>
</select>
Demo
You can use prop('disabled', true / false); to manage which city to choose. You should not have 2 selects with same name, so because you need them in sql I made a fix for it. Notice also in your post you miss first <select> and "City 3" comes up 2 times.
html
<select name="state" id="sel_state">
<option value="">Select your Location</option>
<option value="CHENNAI">CHENNAI</option>
<option value="GURGAON">GURGAON</option>
</select>
<select name="site" id="CHENNAI">
<option value="">Select Site</option>
<option value="City1">City1</option>
<option value="City2">City2</option>
<option value="City3">City3</option>
<option value="City4">City3</option>
</select>
<select name="site" id="GURGAON">
<option value="">Select Site</option>
<option value="City1">City1</option>
</select>
jQuery
$(function () {
$("#sel_state").change(function () {
var a = $("#sel_state option:selected").text();
if (a == 'CHENNAI') {
$('#GURGAON').prop('disabled', true);
$('#CHENNAI').prop('disabled', false);
$('#GURGAON').prop('name', 'site_ignored');
$('#CHENNAI').prop('name', 'site');
}
if (a == 'GURGAON') {
$('#CHENNAI').prop('disabled', true);
$('#GURGAON').prop('disabled', false);
$('#GURGAON').prop('name', 'site');
$('#CHENNAI').prop('name', 'site_ignored');
}
});
});
I have done some searching but I am very new to JavaScript and jQuery and can't seem to figure out how to go about this (or if it is even possible). Basically, I have two select menus and an associated value with each choice that is NOT the same as the text but the same between selects:
<select id="day1Breakfast">
<option value="">Select One</option>
<option value="bec">Bacon Egg and Cheese</option>
<option value="muf">Muffin</option>
<option value="bag">Bagel</option>
</select>
<select id="day2Breakfast">
<option value="">Select One</option>
<option value="bec">Bacon Egg and Cheese</option>
<option value="muf">Muffin</option>
<option value="bag">Bagel</option>
</select>
What I need to do is populate another div with the text of the choice based on the SELECT ID and OPTION VALUE. For instance, if someone selected "Muffin" from the day2Breakfast SELECT, I would want to alert("You chose Muffin for Day 2"). I understand that I can use this to find the text from a div with some ID:
document.getElementById("day1Breakfast").text()
But that will return "Bacon Egg and CheeseMuffinBagel". I need only retrieve the text associated with the specific SELECT ID and OPTION VALUE.
Thank you very much!
You're looking for the elements .value (in vanilla JavaScript), and is .val() in jQuery. Further, to get the text of the selected value, simply request all option:selected within the element:
// Event delegation on all select elements
$("select").on("change", function (e) {
// When a select changes, find the selection option
// Also, get the ID of the select element that changed
var selected = $(this).find("option:selected"),
fromElem = $(this).prop("id");
// Output the new selected text, value, and ID of affected select
console.log( selected.text(), selected.val(), fromElem );
});
U want something like this,
$("#day1Breakfast option[value='bec']").text();
<script type="text/javascript">
function fnc(myid,myvalue)
{
alert("you've chosen "+myvalue+" from "+myid);
}
</script>
<select id="day1Breakfast" onChange="fnc(this.id,this.value)">
<option value="">Select One</option>
<option value="bec">Bacon Egg and Cheese</option>
<option value="muf">Muffin</option>
<option value="bag">Bagel</option>
</select>
<select id="day2Breakfast" onChange="fnc(this.id,this.value)">
<option value="">Select One</option>
<option value="bec">Bacon Egg and Cheese</option>
<option value="muf">Muffin</option>
<option value="bag">Bagel</option>
</select>
I modified your html a little. See demo http://jsfiddle.net/j6HU6/8/
HTML:
<select class="menu" name="day 1">
<option value="">Select One</option>
<option value="bec">Bacon Egg and Cheese</option>
<option value="muf">Muffin</option>
<option value="bag">Bagel</option>
</select>
<select class="menu" name="day 2">
<option value="">Select One</option>
<option value="bec">Bacon Egg and Cheese</option>
<option value="muf">Muffin</option>
<option value="bag">Bagel</option>
</select>
JS:
$('.menu').change(function(){
alert('You chose ' + $(this).children('option:selected').text() + ' for ' + $(this).attr('name'));
});
I have a form with 2 drop down lists on the same page using the same ids.
<select id="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select id="county">
<option value="">Select a country first...</option>
</select>
<div style="clear:both"> </div>
<select id="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select id="county">
<option value="">Select a country first...</option>
</select>
Not sure how to I change the JavaScript code so the second county drop down list functions same as the first one. The existing javascript and how it functions can be seen here:
http://jsfiddle.net/pfYEb/10/
You'll probably want to use class="country" instead of id="country" so that your selector will match both. (same for your id="county") In your jsfiddle, you'll also need to distinguish which county to change within your country change event. One easy way to do this is to use the index of the current element.
I've forked your jsfiddle here.
HTML
<select class="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select class="county">
<option value="">Select a country first...</option>
</select>
<div style="clear:both"> </div>
<select class="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select class="county">
<option value="">Select a country first...</option>
</select>
Relevant Javascript:
$('.country').change(function() {
var country = $(this).val(),
county = $('.county').eq($(".country").index(this)); // This matches the county
// Empty county dropdown
county.empty();
// Update dropdown with appropriate contents
if (country === '') {
county.append('<option value="">Select a country first...</option>');
} else {
$.each(counties[country], function(i, v) {
county.append('<option value="' + i + '">' + v + '</option>');
});
}
});
You can't really solve this querying by id. Element ID's have to be unique within a document by specification by the way. Your best shot, use classes instead.