选择选项值jquery

Question

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.

Answer 1

try this:

if($e.indexOf($article)!=-1){

}else{
    console.log('there are no entries')
}

Answer 2

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

Answer 3

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

Answer 4

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();
      }
    });
   });

Answer 5

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> 

Answer 6

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/

Answer 7

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

Answer 8

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');