Im having issues with the following code. Im simply trying to get the values from whatever is selected from my layout_select2 options.
Currently when selection multi_select and then a option from layout_select2 i end up with the first value from layout_select1 due to the way i load the url. I need a suggestion on how to fix this or reference either of my <select> object's
See Demo
Html
<select id='multi_select' name='multi_select'>
<option value='bing.com'>Bing.com</option>
<option value='Google.com'>Google.com</option>
</select>
<select name='layout_select' id='layout_select1'>
<option value='/images/search?q=windowsphone'>Windows Phone - Images</option>
<option value='/search?q=android'>Android - Search</option>
</select>
<select name='layout_select2' id='layout_select2'>
<option value='/search?q=Windows'>Windows - Images</option>
<option value='/images/search?q=Robots'>Robots - Search</option>
</select>
<input type='button' id='button' value='Click Me' />
JavaScript
$(document).ready(function () {
$('#button').click(function () {
var url = 'http://www.' + $('#multi_select').val() + $('#layout_select1').val();
window.location = url;
});
$('#layout_select1').show();
$('#layout_select2').hide();
$('#multi_select').change(function () {
if ($('#multi_select option:selected').text() == "Bing.com") {
$('#layout_select1').fadeIn('slow');
}
if ($('#multi_select option:selected').text() == "Google.com") {
$('#layout_select1').hide();
$('#layout_select2').fadeIn('slow');
} else {
$('#layout_select1').fadeOut('slow');
}
});
});
You can filter the layout_select elements to use the value of the visible select like this:
$('#layout_select1, #layout_select2').filter(':visible').val();
When you combine this with a couple tweaks to your fiddle, it works pretty well:
$(document).ready(function () {
$('#button').click(function () {
var url = 'http://www.' + $('#multi_select').val() + $('#layout_select1, #layout_select2').filter(':visible').val();
window.location = url;
});
$('#layout_select1').show();
$('#layout_select2').hide();
$('#multi_select').change(function () {
if ($('#multi_select option:selected').text() == "Bing.com") {
$('#layout_select1').fadeIn('slow');
$('#layout_select2').hide();
} else {
$('#layout_select2').fadeIn('slow');
$('#layout_select1').hide();
}
});
});
Related
I am using a jquery code found on Stakeoverflow to remove duplication value in the dropdown. my problem is the jquery code worked for the first dropdown but will not work for the second dropdown any help will be welcome
1st dropdown
<select id="AssetStoredWhere" name="AssetStoredWhere" class="form-control js-example-disabled-results
select">
<option value="#ViewBag.AssetStoredWhere">#ViewBag.AssetStoredWhere</option>
<option value="UK">UK</option>
<option value="EU">EU</option>
<option value="Worldwide">Worldwide</option>
</select>
2bd Dropdown
<select asp-for="Dpiaavailable" id="Dpiaavailable" name="Dpiaavailable" class="form-control js-
example-disabled-results select">
<option value="#ViewBag.Dpiaavailable">#ViewBag.DpiaavailableValue</option>
<option value="False">No</option>
<option value="True">Yes</option>
</select>
Jquery code
var seen = {};
jQuery('.select').children().each(function () {
var txt = jQuery(this).attr('value');
if (seen[txt]) {
jQuery(this).remove();
} else {
seen[txt] = true;
}
});
You need another loop to iterate through the select elements themselves, not through the option elements of every select as one. Try this:
$('.select').each(function() {
var seen = {};
$(this).children().each(function() {
var $option = $(this);
if (seen[$option.val()]) {
$option.remove();
} else {
seen[$option.val()] = true;
}
});
});
I am trying to set a default option in a select menu from the local storage, I am using a GUID as the value.
<script type="text/javascript">
$(document).ready(function () {
var guid = getParameterByName("dashId");
//$("#cboDashboards").val(guid); - Attempt #1
//$("#cboDashboards > option[value=" + guid + "]").prop("selected", true); - Attempt #2
//jQuery('#cboDashboards > option[value="' + guid + '"]').prop('selected', true) - Attempt #3
});
document.getElementById("cboDashboards").onchange = function () {
localStorage.dashboardGuid = this.value;
window.location.href = "/Home/Index?dashId=" + this.value;
};
</script>
The GUID that gets stored is the same as the GUID that I try to populate the combo box with, however, I have tried three different methods of trying to populate the combo box and none have worked. Any suggestions to why this isn't working as expected?
EDIT -
Would this method have any effect on it? It's called to populate the combo box with the values:
function populateDashboard(data) {
var options = $("#cboDashboards");
$.each(data, function () {
options.append($("<option />").val(this.DashboardGuid).text(this.Name));
});
}
I populated some test data -
<select id="cboDashboards">
<option value="0">Select dashboard</option>
<option value="1">Select dashboard 1</option>
<option value="2">Select dashboard 2</option>
<option value="3">Select dashboard 3</option>
#* <option value="0">Select dashboard</option>*#
</select>
and I did :
$("#cboDashboards").val('1'); // - Attempt #1
This worked, so I seem to be having a problem with the GUID value?
Try with jQuery using this code:
function populateDashboard(data) {
var options = $("#cboDashboards");
$.each(data, function () {
options.append($("<option />").val(this.DashboardGuid).text(this.Name));
});
var guid = getParameterByName("dashId");
//select element
$('#cboDashboards option[value='+ guid +']').attr('selected', 'selected');
}
I hope this help.
having a bit of trouble here, any help would be greatly appreciated...
I am trying to hide and show a bunch of list items based on several classes assigned to them.
In my JS Fiddle Example I have several items with classes relating to their description.
I have managed to hide and show these, but complex selections are not possible...
example: If I wanted to only see fabrics that are "premium", "blue" and "linen".
Something like this (that works lol) is what I am after...
$('.sel_range').click(function() {
range = document.getElementById("range").value;
if ($('.fabric_option').hasClass(range)) {
$('.' + range).fadeIn('fast', function() {
!$('.fabric_option').hasClass(range).fadeOut("fast");
});
}
});
Something like this should work
var selects = $('#range, #fabric, #colour');
selects.on('change', function() {
var el = selects.map(function(i, item) {
return item.value.indexOf('all_') === 0 ? '' : '.' + item.value;
}).get().filter(function(x) {
return x.length;
}).join('');
$('#fabric_options li').show().not(s?s:'*').hide();
});
FIDDLE
It starts with showing all the list items, then joins the values together to create a clas selector, leaving out the class if all_something is selected etc. and then hides everything that doesn't match, and if nothing is selected excludes everything.
I think it can be solved like this:
var range, fabric, colour;
var updateShown = function() {
$('li').show()
if (range) {
$('li:not(.' + range + ')').hide();
}
if (fabric) {
$('li:not(.' + fabric + ')').hide();
}
if (colour) {
$('li:not(.' + colour + ')').hide();
}
}
// Range
$('#range').change(function() {
range = $(this).val();
updateShown();
});
// Fabric
$('#fabric').change(function() {
fabric = $(this).val();
updateShown();
});
// Colour
$('#colour').change(function() {
colour = $(this).val();
updateShown();
});
With value="" of each select first option
<select id="range">
<option class="sel_range" value="">All Ranges</option>
<option class="sel_range" value="luxury">Luxury</option>
<option class="sel_range" value="premium">Premium</option>
<option class="sel_range" value="base">Base</option>
</select>
<select id="fabric">
<option class="sel_fabric" value="">All Fabrics</option>
<option class="sel_fabric" value="leather">Leather</option>
<option class="sel_fabric" value="linen">Linen</option>
<option class="sel_fabric" value="cotton">Cotton</option>
</select>
<select id="colour">
<option class="sel_colour" value="">All Colours</option>
<option class="sel_colour" value="red">Red</option>
<option class="sel_colour" value="blue">Blue</option>
<option class="sel_colour" value="green">Green</option>
</select>
jsFiddle demo
what about this?
$('#range').on('change',function () {
range = $("#range").val();
$('li').each(function(){
if(!$(this).hasClass(range)){
$(this).hide();
}else{
$(this).show();
}
});
});
// just for range, rest in fiddle
http://jsfiddle.net/J3EZX/6/
If you're using jQuery, just string them together with a . and no space, e.g.:
$(".linen.red.base").text("Help! I'm being replaced!");
This is a follow up question. I am trying to get a input box to be hidden when a pull-down menu has the value "tid and acc". I am at a loss why this code isn't working, any help would much appreciated! Here is a link on jfiddle: http://jsfiddle.net/Mm7c7/
<script>
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});
</script>
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc">
Your script is being evaluated before your element is ready. Placing the script in a $(document).ready() or after the content it affects will solve the problem
http://jsfiddle.net/Wx8Jf/2
$(document).ready(function(){
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});
});
Couple problems:
You'll either need to wrap the function in $(function(){}) to ensure DOM is ready, or drop it below your HTML (the former is recommended). If you don't wrap it (or drop it), then the script is executed before the elements have actually been rendered, causing $('#rule-type') to be undefined.
Your logic is incorrect (according to your explanation). Your current logic says to hide the input box when anything other than tid and acc is selected.
Working version:
<script>
$(function(){
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').hide();
}
else {
$('#tid-acc').show();
}
});
});
</script>
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc" />
http://jsfiddle.net/dbrecht/QwkKf/
Take a look here for a working sample: http://jsfiddle.net/Mm7c7/1/
HTML:
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc">
Javascript:
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});
I have a form with 3 fields. Country, state and users
I am trying to do the following. when United states is selected as a country, the state field will show. The problem is that when i use the tab key on the keyboard, it is skipping the state field and its going on the users field. So i tried using the focus property so when i select United states, the state will show + selected, but I had no luck.. Below please find the code I am using
$(document).ready(function () {
$("#cmbCountries").change(function () {
$("#cmbCountries option:selected").each(function () {
if ($(this).text() == "United States") {
$("#cmbstate").show();
$("#cmbstate").focus();
}
else {
$("#cmbstate").hide();
}
});
}).change(); });
Any help please?
Chek this out
And javascript
$(function (){
$("#cmbstate").hide();
$("#cmbCountries").change(function () {
if($(this).val() == 'US')
{
$("#cmbstate").show();
$('#cmbstate').focus()
}
else{
$("#cmbstate").hide();
$('#users').focus();
}
})
})
And html
<input type="text" name="text" id="first" />
<select id="cmbCountries">
<option value="OTHER">OTHER</option>
<option value="US">US</option>
<option value="OTHER1">OTHER1</option>
</select>
<select id="cmbstate">
<option value="value">Value 1</option>
<option value="value">Value 2</option>
<option value="value">Value 3</option>
</select>
<select id="users">
<option value="asf">asdfasdf</option>
<option value="fadfas">sdffd</option>
</select>
The Tabindex values must be wrong, try and manually set the Tabindex of each input to 0, 1, 2 respectively and then you should be able to tab between them easily
Please try using this code,
$(document).ready(function () {
$("#cmbCountries").change(function () {
$("#cmbCountries option:selected").each(function () {
if ($(this).text() == "United States") {
$("#cmbstate").show();
$("#cmbstate").select();
}
else {
$("#cmbstate").hide();
}
});
}).change(); });
changed focus() to select()
I had once done this in my project also which worked for me.