將條件下拉列表寫入MySQL

Question

希望這不會太令人困惑。

我有一個條件表格，可以讓用戶選擇一個類別，然后根據該類別，他們需要從該類別的子類別中進行選擇。 這很好。

但是，我的問題是，在寫入MySQL時，在“我的子類別”列中插入的值始終是最后一個“選擇”組的第一個值（在本例中為“三明治”）。 例..

我的主要分類：入門| 晚飯 三文治

• 起動器的子類別：沿海或南部
• 晚飯的子類別：煙熏房或特色菜
• 三明治的子類別：三明治或男孩

無論您選擇哪個類別/子類別，它始終會在MySQL中寫入“三明治”子類別。 說得通？

如果您想使用下拉菜單，這是我的代碼和JSFiddle。 http://jsfiddle.net/kkobayashi/5f5tw4t0/

PHP到MySQL

<?php
    if( isset( $_POST['create'] ) ):

    $cat = $_POST['cat']; 
    $catsubs = $_POST['subcategory']; 
    $name = $_POST['name'];
    $description = $_POST['description'];
    $price = $_POST['price'];

    mysql_query("INSERT INTO leDB (cat,subcategory) 
        VALUES('$cat','$catsubs')") 

    or die(mysql_error());

    echo "Success."; /** success message **/

    endif;
?>

的HTML

<form action="" method="POST">
<!-- MAIN CATS -->
<select id="mainCat" class="source" name="cat">
    <option value="starters">Starters</option>
    <option value="supper">Supper</option>
    <option value="sandwiches">Sandwiches</option>
</select>


<!-- SUB CATS -->
<div id="cat_starters" class="subcategory" style="display:inline;">
    <select class="" id="starters" name="subcategory">
        <option value="coastal">Coastal</option>
        <option value="southern">Southern</option>
    </select>
</div>
<div id="cat_supper" class="subcategory hidden">
    <select class="" id="supper" name="subcategory">
        <option value="smokehouse">Smokehouse</option>
        <option value="specialties">Specialties</option>
    </select>
</div>
<div id="cat_sandwiches" class="subcategory hidden">
    <select class="" id="sandwiches" name="subcategory">
        <option value="sandwich">Sandwich</option>
        <option value="poboy">Po-Boys</option>
    </select>
</div>
</form>

JS

// Conditional Drop Down
    $(document).ready(function(){
        $('#mainCat').on('change', function() {         
            // Setting this variable to add inline
            var inline = document.querySelector('#cat_' + $(this).val() );

            // Show/Hide
            $('div.subcategory').hide();
            $('#cat_' + $(this).val() ).show();
            inline.style.display = "inline";
        });
    });

一點CSS

div.hidden { 
   display: none; 
}

如果您感到困惑，請隨時對我大喊大叫，不知道我對這個問題的描述做得如何。 謝謝大家。

Answer 1

隱藏選擇並不會真正將其從DOM中刪除，就像您將查看是否檢查源一樣。 它只對用戶隱藏。

這意味着具有相同name屬性的每個選擇都將覆蓋最后一個選擇，因此為什么只獲得最后一個選擇。 一個簡單的解決方法是將name屬性添加到正確的選擇中。

$(document).ready(function(){
    $('#mainCat').on('change', function() {         
        // Setting this variable to add inline
        var inline = document.querySelector('#cat_' + $(this).val() );

        // Show/Hide
        $('div.subcategory').hide().attr('name', '');
        $('#cat_' + $(this).val() ).show().attr('name', 'subcategory');
        inline.style.display = "inline";
    });
});

Answer 2

您需要為選擇添加唯一的名稱。 例如，對於初學者，請添加name="starters" 。 添加名稱作為類別的選項值。

然后，使用： $catsubs = $_POST[$cat];

Answer 3

將子類別名稱更改為subcategory1，... 2和.... 3，或者僅在形式中使它們唯一

您需要名稱唯一。 無論選擇什么，最終都使用相同的三明治的原因是因為您使用的是相同的名稱。 發送$ _POST數據后，它將發送一個鍵名與表單中名稱相同的數組。 因此，要確切了解用戶單擊，選擇或鍵入的內容，每個名稱必須唯一