выберите значение опции 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], тогда #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 = "category" - это имя списка элементов, которые я хочу отобразить.

При изменении категории я обновляю статью, выбрав только список элементов, которые я хочу показать.

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