jquery hide and show select listオプション.val（）

Question

私はもう一度問題に遭遇しましたが、私はあなたの洞察力が必要です。以前のSELECT入力でユーザーが選択した内容に応じて自動ソートする必要があるビルド中のWebページに対して、複数のSELECTメニューを使用しています。私は現在私のニーズに合ったhide/showメソッドを使用していますが、.val（）が正確な数値を表示する方法を理解することはできません。たとえば、Cat 1を選択した場合は、タイプ1、タイプ10、タイプ11がワイルドカードなどのように表示されます。.val（）が絶対的であるため、2番目のSELECTだけにタイプ1が表示されますか？

コードスニペットが続きます。

はこれを投稿した後、私は実際に...私に恥をワイルドカードを使用していたことがわかりました XenosのK.

$("#TypeSelect").children('option:gt(0)').hide(); 
 
$("#CategorySelect").change(function() { 
 
    $("#TypeSelect").children('option').hide(); 
 
    $("#TypeSelect").children("option[data-type^=" + $(this).val() + "]").show() 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="form-control" id="CategorySelect" name="CategorySelect" style="width:100%;"> 
 
    <option value="-" title="-" data-category="-">-</option> 
 
    <option value="1" title="cat 1" data-category="1">cat 1</option> 
 
    <option value="2" title="cat 2" data-category="2">cat 2</option> 
 
</select> 
 
<select class="form-control" id="TypeSelect" name="TypeSelect" style="width:100%;"> 
 
    <option value="-" title="-" data-type="-">-</option> 
 
    <option value="type 1" title="type 1" data-type="1">type 1</option> 
 
    <option value="type 2" title="type 2" data-type="2">type 2</option> 
 
    <option value="type 3" title="type 3" data-type="3">type 3</option> 
 
    <option value="type 4" title="type 4" data-type="4">type 4</option> 
 
    <option value="type 5" title="type 5" data-type="5">type 5</option> 
 
    <option value="type 6" title="type 6" data-type="6">type 6</option> 
 
    <option value="type 7" title="type 7" data-type="7">type 7</option> 
 
    <option value="type 8" title="type 8" data-type="8">type 8</option> 
 
    <option value="type 9" title="type 9" data-type="9">type 9</option> 
 
    <option value="type 10" title="type 10" data-type="10">type 10</option> 
 
    <option value="type 11" title="type 11" data-type="11">type 11</option> 
 
    <option value="type 12" title="type 12" data-type="12">type 12</option> 
 
    <option value="type 13" title="type 13" data-type="13">type 13</option> 
 
    <option value="type 14" title="type 14" data-type="14">type 14</option> 
 
    <option value="type 15" title="type 15" data-type="15">type 15</option> 
 
</select>

Answer 1

ああ主よ、事前にありがとうございます。この

$("#TypeSelect").children("option[data-type=" + $(this).val() + "]").show() 

に

$("#TypeSelect").children("option[data-type^=" + $(this).val() + "]").show() 

を変更

はちょうど私の一日固定しました。他の誰かがそれを望む場合に備えて、私はここに残しています。

敬具、 XenosのK.

$("#TypeSelect").children('option:gt(0)').hide(); 
 
$("#CategorySelect").change(function() { 
 
    $("#TypeSelect").children('option').hide(); 
 
    $("#TypeSelect").children("option[data-type=" + $(this).val() + "]").show() 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="form-control" id="CategorySelect" name="CategorySelect" style="width:100%;"> 
 
    <option value="-" title="-" data-category="-">-</option> 
 
    <option value="1" title="cat 1" data-category="1">cat 1</option> 
 
    <option value="2" title="cat 2" data-category="2">cat 2</option> 
 
</select> 
 
<select class="form-control" id="TypeSelect" name="TypeSelect" style="width:100%;"> 
 
    <option value="-" title="-" data-type="-">-</option> 
 
    <option value="type 1" title="type 1" data-type="1">type 1</option> 
 
    <option value="type 2" title="type 2" data-type="2">type 2</option> 
 
    <option value="type 3" title="type 3" data-type="3">type 3</option> 
 
    <option value="type 4" title="type 4" data-type="4">type 4</option> 
 
    <option value="type 5" title="type 5" data-type="5">type 5</option> 
 
    <option value="type 6" title="type 6" data-type="6">type 6</option> 
 
    <option value="type 7" title="type 7" data-type="7">type 7</option> 
 
    <option value="type 8" title="type 8" data-type="8">type 8</option> 
 
    <option value="type 9" title="type 9" data-type="9">type 9</option> 
 
    <option value="type 10" title="type 10" data-type="10">type 10</option> 
 
    <option value="type 11" title="type 11" data-type="11">type 11</option> 
 
    <option value="type 12" title="type 12" data-type="12">type 12</option> 
 
    <option value="type 13" title="type 13" data-type="13">type 13</option> 
 
    <option value="type 14" title="type 14" data-type="14">type 14</option> 
 
    <option value="type 15" title="type 15" data-type="15">type 15</option> 
 
</select>