select 选项值 jquery

Question

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

示例：

<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] selected 那么 #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

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

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

您需要获取 select 值 [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="category" 选项值是我要显示的项目列表的名称。

当类别发生变化时，我会更新文章 select，仅包含我想要显示的项目列表。

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

select 选项值 jquery

select option value jquery

javascript

jquery

selector