Question

我在jquery中处理选项值时遇到了一些问题。我有2种选择，其中一个主题包含一个数组。一些我怎么不知道如何比较它们。

示例：

<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>

脚本：

 $(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')
            }

       });

 })

但我不知道如何正确地比较主题。如果选择了#category [1,2]，那么#article 1和2只会在选项中显示而另一个应该被隐藏。任何想法或建议都非常感谢你。最好的。

Answer 1

试试这个：

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

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

Answer 2

首先，有一个拼写错误categorie。它应该是category

试试这个

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

第一个选择元素中的值不是数组，只是一个字符串，删除括号，只留下逗号分隔的数字，如下所示：

<强> 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 （第一个选项）

// use this
$('#category').change(function(){
  var cat = $( this ).val().split(',');
  $('#article option').hide()
  $.each(cat,function(i,e){
    $('#article option[value="'+e+'"]').show()
  })
});

（第二个选项）

//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

尝试此选项，例如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

您需要获取选择值[1,2]，然后使用JSON.parse制作该数组和数组。然后你可以搜索它。

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

我不确定您是否可以灵活地更改类别选项值属性，但我冒昧地采取另一种方法解决您的问题。

我创建了一个对象，其中包含要显示的可能项目列表。 select id =＆＃34; category＆＃34; options value是我想要显示的项目列表的名称。

当类别更改时，我更新了文章选择，只包含我想要显示的项目列表。

<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>

至于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);
       });

 });

以下是一个实例：https://jsfiddle.net/marioandrade/mkt16n1g/1/

Answer 7

你可以使用类似的东西。它对我有用。

这是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>

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

我认为这可能对你有帮助。

由于

Answer 8

看起来非常简单：

$('#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');

选择选项值jquery

8 个答案: