選擇選項值jquery

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

您可以使用類似的東西。這個對我有用。

這裏是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 2

試試這個：

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

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

Answer 3

首先有一個錯字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 4

第一選擇元件內的值是不是一個數組，它只是一個字符串，除去支架，並只留下數與逗號像以下分隔：

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 5

嘗試使用此選項，工作示例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 6

你需要獲得選擇值[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 7

我不知道你的靈活性，以更改分類選項的值屬性，但我冒昧地採取另一種方法來您的問題。

我創建了一個對象，並列出了可能顯示的項目。 選擇id =「類別」選項值是我想要顯示的項目列表的名稱。

當類別更改時，我更新文章選擇只有我想要顯示的項目列表。

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