i have a bit of problem to deal with the option value in jquery. which i have 2 kind of select and one of theme contain an array. some how i dont know how to compared them.
example:
<select id="category">
<option value="[1,2]"> category fruit</option>
<option value="[3,4]"> category vegies</option>
</select>
<select id="article">
<option value="1">banana</option>
<option value="2">mango</option>
<option value="3">letus</option>
<option value="4">spinach</option>
</select>
script:
$(function(){
var $article = $('#article > option').each(function(){
//var $v = $(this).val();
//console.log($v);
return $(this).val();
});
$('#categorie').on('change', function(){
var $e = $(this).val();
console.log($e);
if($e == $article){
// here should be the value from the article was choosed from category
}else{
console.log('there are no entries')
}
});
})
but i dont know how to compare theme properly. and it should be if #category [1,2] selected then the #article 1 and 2 only shown in option and the other should be hidden. any kind of idea or suggestion thank you very much. best regard.
You can use something like that. It works for me.
Here is html.
<select id="category">
<option value="[1,2]"> category fruit</option>
<option value="[3,4]"> category vegies</option>
</select>
<select id="article">
<option value="1">banana</option>
<option value="2">mango</option>
<option value="3">letus</option>
<option value="4">spinach</option>
</select>
And here is jquery.
$(document).ready(function(){
function checkData(value){
var $e = value;
$('#article > option').each(function(index, item) {
if ($e.indexOf($(item).val()) === -1) {
$(item).hide();
} else {
$(item).show();
}
});
}
$('#category').change(function(){
checkData($(this).val());
});
checkData($('#category').val());
});
I think that may help you.
Thanks
First of all there is a typo categorie. It should be category
Try this
var opts = [];
$('#article > option').each(function(){
opts.push($(this).val());
});
console.log(opts)
$('#category').on('change', function(){
var $e = $(this).val();
var present = false;
$(opts).each(function(i,v){
if($e[1]==v){
present= true;
console.log($e[1])
}
});
if(!present){
console.log('there are no entries')
}
});
Demo
You need to get the select value [1,2], then use JSON.parse to make that and array. Then you can search it.
var $article = [];
$(function() {
$article = $('#article > option').map(function() {
return parseInt(this.value);
}).get();
console.log($article);
$('#category').on('change', function() {
var $e = JSON.parse(this.value);
console.log($e);
valid = false;
$.each($e, function(i, val){
valid = valid || $.inArray(val, $article) != -1;
});
if (valid)
alert('Exists' + $e.join())
else
console.log('there are no entries')
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select id="category">
<option value="[1,2]">category fruit</option>
<option value="[3,4]">category vegies</option>
</select>
<select id="article">
<option value="1">banana</option>
<option value="2">mango</option>
<option value="3">letus</option>
<option value="4">spinach</option>
</select>
try this:
if($e.indexOf($article)!=-1){
}else{
console.log('there are no entries')
}
Try this option, working example jsfiddle
$('#categorie').on('change', function(){
var $e = $(this).val();
$('#article > option').each(function(index, item) {
if ($e.indexOf($(item).val()) === -1) {
$(item).hide();
} else {
$(item).show();
}
});
});
The value inside first select element is not an array, it just a string, remove bracket and leave only number with comma separated like following :
HTML
<select id="category">
<option value="1,2"> category fruit</option>
<option value="3,4"> category vegies</option>
</select>
<select id="article">
<option value="">chose</option>
<option value="1">banana</option>
<option value="2">mango</option>
<option value="3">letus</option>
<option value="4">spinach</option>
</select>
Js
(first option)
// use this
$('#category').change(function(){
var cat = $( this ).val().split(',');
$('#article option').hide()
$.each(cat,function(i,e){
$('#article option[value="'+e+'"]').show()
})
});
(second option)
//or use this : filter out only matched element
var cacheElem = $('#article option').detach();
$('#category').change(function(){
$('#article option').remove();
var cat = $( this ).val().split(',');
var h = cacheElem.filter(function(){
return $.inArray(this.value, cat) !== -1 && this
});
$('#article').append(h)
});
DEMO
I'm not sure of your flexibility to change the category option value attribute but I took the liberty to take another approach to your issue.
I created an object with a list of possible items to display.
The select id="category" options value is the name of the list of items I want to display.
When the category changes I update the article select with only the list of items I want to show.
<select id="category">
<option value="fruits"> category fruit</option>
<option value="vegies"> category vegies</option>
</select>
<select id="article">
<option value="1">banana</option>
<option value="2">mango</option>
</select>
as for the JavaScript
$(function(){
var items = {
fruits: ["banana", "mango"],
vegies: ["letus", "spinash"]
};
var current = items[0];
var updateOptions = function(cat_in) {
current = cat_in;
output = "";
for(var i = 0; i<items[cat_in].length; i++) {
output += '<option value="'+i+'">'+items[cat_in][i]+'</option>';
}
return output;
};
$('#category').on('change', function(){
var $e = $(this).val();
if($e == current) return;
var options = updateOptions($e);
$("#article").empty().append(options);
});
});
Here is a live example: https://jsfiddle.net/marioandrade/mkt16n1g/1/
Seems pretty simple:
$('#category').on('change', function() {
var currentCategory = $(this).val();
// reset and show/hide group items
$('#article').val("").find('option').each(function(index) {
$(this).toggle(!(currentCategory.indexOf($(this).val()) === -1));
});
}).triggerHandler('change');
Related
<div id="div1">
<input id="input1">
<select multiple="multiple" id="select1">
<option value="sandeep">sandeep</option>
<option value="ram">ram</option>
<option value="raj">raj</option>
<option value="pak">pak</option>
<option value="abc">abc</option>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="journey">journey</option>
<option value="mahesh">mahesh</option>
</select>
</div>
<script type="text/javascript">
var selectClone1;
selectClone1 = $('#select1 option').clone();
$('#input1').on('keyup', function(){
$('#select1 option').remove();
var value = $(this).val();
selectClone1.filter(function(index, element){
console.log('index : '+index);
console.log('element : '+element);
return value == '' || element.value.indexOf(value) >= 0;
}).appendTo('#select1');
});
$('#select1').on('click', function(){
var option = $('option:selected', this).clone();
$('option:selected', this).remove();
selectClone1 = $.grep(selectClone1, function(el){return el.value == option[0].value}, true);
</script>
I am working on the search functionality along with removal of options when user clicked on option. The above code is working properly for search but when i clicked an option to delete from select box after search for a value, parameters of filter function(index, element) getting exchanged. Due to it error is coming. Can you help me guys where i am missing the point.
Better to use Array's splice method for removing element from main array and no need to clone.
$('#select1').on('click', function(){
var option = $('option:selected', this);
$('option:selected', this).remove();
selectClone1.splice($.inArray( option[0], selectClone1 ), 1);
});
I'm having a problem get this piece of code to work:
$(document).ready(function(){
$('#ButtonAluguel').click(function(){
{
var id = $(this).attr('name');
var str = "";
$("option:selected").each(function () {
switch(id=='Trololo'){
case true:
var option = $(this);
str += '?tid_1[]='+ option.attr('value');
break;
case false:
var option = $(this);
str += '?tid[]='+ option.attr('value');break;
}
});
window.location = "localhost/aluguel"+ str;
}});
});
I need it to keep adding stuff to "str" based on the name of a multiple select, identified above as id. Long story short, if the name of the select is "Trololo", id adds tid_1[], if not, it adds tid[] to the str. Any help is appreciated.
Edit:
The multiple select code is as follows(Forgot to put it in the first place, the question doesn't make much sense without it)
<form >
<select class="SelectTipoAluguel" multiple="true" data-placeholder="Tipo de Imóvel" style="width:200px;">
<option value="1">Aasdasdasd</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<select name="Trololo" class="SelectBairroAluguel" id="trololo" multiple="true" data-placeholder="Bairro" style="width:200px;">
<option value="1">Aadasd</option>
<option value="2">Basda</option>
<option value="3">Casda</option>
<option value="4">Dasda</option>
</select>
<input class="ButtonSubmitHome" id="ButtonAluguel" value="Pesquisar" >
</form>
To explain it more clearly, the user must fill the form and choose between the options, so when he clicks the "ButtonAluguel", every option from the select "SelectTipoAluguel" is added to the URL as tid[] and the ones from "SelectBairroAluguel" is added to the URL as tid_1[]
Code edited to reference updated question and OP's comments.
$(document).ready(function() {
var id;
var str = "";
$('#ButtonAluguel').click(function() {
var option = [];
$('select option:selected').each(function(i, selected) {
id = $(this).parent().attr('name');
option[i] = $(selected).val();
if (id == 'Trololo') {
str += '?tid_1[]=' + option[i];
} else {
str += '?tid[]=' + option[i];
}
});
var url = "localhost/aluguel" + str;
console.log(url);
//window.location = "localhost/aluguel" + str;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="SelectTipoAluguel" multiple="true" data-placeholder="Tipo de Imóvel" style="width:200px;">
<option value="1">Aasdasdasd</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<select name="Trololo" class="SelectBairroAluguel" id="trololo" multiple="true" data-placeholder="Bairro" style="width:200px;">
<option value="1">Aadasd</option>
<option value="2">Basda</option>
<option value="3">Casda</option>
<option value="4">Dasda</option>
</select>
<input class="ButtonSubmitHome" id="ButtonAluguel" value="Pesquisar">
I selected multiple fields from select box 1 and select box 2. Then hit the execute button, my alerts shows "AnimalBird,WolfFox".
I have googled how to make it add a comma when I select multiple fields when I hit the execute button, but no luck. I would like it to read "Animal,Bird,Wolf,Fox" with commas.
Below is my code
html:
<select name="select1" id="select1" size="4" multiple>
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2" size="4" multiple>
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM</option>
</select>
<input type="button" id="button" value="Execute" />
javascript:
$("#select1").change(function() {
if($(this).data('options') == undefined){
/*Taking an array of all options-2 and
kind of embedding it on the select1*/
$(this).data('options',$('#select2 option').clone());
}
var id = $(this).val();
console.log(id);
var options = $(this).data('options').filter(function () {
return $.inArray(this.value, id) > -1
});
$('#select2').html(options);
});
$('#button').click(function() {
var str = $('#select1 option:selected').text() +','+ $('#select2 option:selected').text();
alert(str);
});
If possible I would like the selected fields to show below the execute button.
Thank you everyone for your help.
Try this to loop through
http://jsfiddle.net/xd7pq22y/
$("#select1").change(function() {
if($(this).data('options') == undefined){
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options',$('#select2 option').clone());
}
var id = $(this).val();
console.log(id);
var options = $(this).data('options').filter(
function () {
return $.inArray(this.value, id) > -1
});
$('#select2').html(options);
});
$('#button').click(function() {
var values = [];
$('#select1 option:selected').each(function() {
values.push($(this).text());
});
$('#select2 option:selected').each(function() {
values.push($(this).text());
});
$("#wrapper").html(values.join(", "));
});
Just do this, with a tidy way:
$('#button').click(function() {
var values = [];
$('#select1 :selected, #select2 :selected').each(function() {
values.push($(this).text());
});
alert(values.join(','));
});
What we use here is the below techniques:
$().each() method: Loop on the selected element set;
Array.push() method: Append one string to an array once;
Array.join(separator) method: just join the strings in the array;
Hi I am using jquery chosen plugin. I want to selected menu value by selected value from other select menu. But my code working with simple selected menu. I want it to work with jquery chosen plugin. Example code
$(".chzn-select").chosen()
$('[id*=second]').change(function(){
var val = $(this).find('option:selected').val()
if(val.toLowerCase()=='mr'){
$('[id*=gender]').find('option').eq(0).attr('selected', 'selected');
}
else{
$('[id*=gender]').find('option').eq(1).attr('selected', 'selected')
}
})
You should add value to the options and try to match those value onchange. See my implementation below and let me know if it works for you.
Edit: Added few lines to update the plugin selection.
DEMO: http://jsfiddle.net/vUkQg/3/
Note: Below method can relate any number of drop downs with just same class and value.(no change to the script) http://jsfiddle.net/vCE4Y/18/
HTML:
<select id="second" class="chzn-select" style="width:100px">
<option value="1"> mr</option>
<option value="2"> mrs</option>
</select>
<select id="gender" class="chzn-select" style="width:100px">
<option value="1"> male</option>
<option value="2"> female</option>
</select>
JS:
$(function() {
$(".chzn-select").chosen().change(function() {
var val = $(this).val();
$('.chzn-select').val(val);
$('.chzn-select').not(this).each(function () {
var $chzn = $('#' + this.id + '_chzn');
var $li = $chzn.find('li');
$li.removeClass('result-selected');
var selectedLi = $li.eq(val - 1);
selectedLi.addClass('result-selected');
$chzn.find('a.chzn-single span').html(selectedLi.html());
//update selected result in plugin
var $data = $(this).data('chosen');
$.each($data['results_data'], function (idx, el) {
if (idx == val-1) {
el.selected = true;
$data.result_single_selected = selectedLi;
} else {
el.selected = false;
}
});
});
});
});
Demo
I hope the below script does what you expect
$(".chzn-select").chosen();
$('[id*=second]').change(function(){
var val = $('div[id*=second]').find('li.result-selected').html().trim();
$('select[id*=gender]').find('option').removeAttr('selected');
$('div[id*=gender]').find('li.active-result').removeClass('result-selected');
var selectedValue = "";
if(val.toLowerCase()=='mr'){
selectedValue = $('div[id*=gender]').find('li.active-result').eq(0).addClass('result-selected').html();
$('select[id*=gender]').find('option').eq(0).attr('selected','selected');
} else {
selectedValue = $('div[id*=gender]').find('li.active-result').eq(1).addClass('result-selected').html();
$('select[id*=gender]').find('option').eq(1).attr('selected','selected');
}
$('div[id*=gender]').find('a.chzn-single span').html(selectedValue);
});
Use selectedIndex
eg:
document.getElementById('selectId').selectedIndex = 0;
//selectId - id of the select elem
<select id="selectId">
<option value="1" selected="selected">Male</option>
<option value="2">Female</option>
</select>
To get the Selected value
var e = document.getElementById("selectId");
var strUser = e.options[e.selectedIndex].value;
here strUser = 1;
if you want the TEXT
var strUser = e.options[e.selectedIndex].text;
here strUser = Male;
i think this helps you.
<select id="second" class="chzn-select" style="width: 100px">
<option value="1">mr</option>
<option value="2">mrs</option>
</select>
<select id="gender" class="chzn-select" style="width: 100px">
<option value="1">male</option>
<option value="2">female</option>
</select>
$(document).ready(function () {
$('.chzn-select').change(function () {
$('.chzn-select').val($(this).val());
//$('.chzn-select').val($(this).val()).trigger('change');
});
});
Demo
I used the value of the options, the minus 1 is to reach the indexnumber
DEMO
$('#second').change(function(){
var val = $(this).val();
$('#gender option').eq(val - 1).attr('selected', 'selected');
});
or
$('#second').change(function(){
var index = $(this)[0].selectedIndex;
$('#gender option').eq(index).attr('selected', 'selected');
});
hello
i need to load page based on the results of dropdown box. for example in my code i have value="userlog". if this selected it will load userlog.php and remove itself so that only userlog.php is being used. thanks
<select onchange="updatePage(this.value)">
<option value="">Select a report</option>
<option value="userlog">User Logs</option>
<option value="actionlog">Action Logs</option>
</select>
<select id="select_page">
<option value="">Select a report</option>
<option value="userlog">User Logs</option>
<option value="actionlog">Action Logs</option>
</select>
$('#select_page').change(function() {
var $el = $(this);
if($el.val() != '') {
$('#page').load($el.val()+'.php');
$el.find('option:selected').remove();
}
});
On change event you will get the selected options value. Using this value you can decide what you want to do.
something like this :
$(document).ready(function() {
$("select option ").each(function() {
if (location.href.indexOf($(this).val()) >= 0) {
$(this).remove();
}
});
$('select').change(function() {
var obj = $(this);
location.href = obj.val() + ".php";
});
});