如何使用此 JavaScript 使一個選擇選項依賴於前一個選擇選項？

Question

這是我的問題。 我試圖讓第二個選擇選項依賴於前一個選擇選項。 第一個選擇選項決定鞋子的顏色。 第二個選擇選項，尺碼，基於鞋子的顏色。 我怎樣才能使這個足夠動態以根據顏色改變可用尺寸？

這是我的代碼：

 <SCRIPT type="text/javascript"> $(document).ready(function() { $("#color").change(function() { var element = $(this); if(element.val() === "brn") { $("#size").append('<option value="5">5</option>'); $("#size").append('<option value="6">6</option>'); $("#size").append('<option value="7">7</option>'); $("#size").append('<option value="8">8</option>'); $("#size").append('<option value="9">9</option>'); $("#size").append('<option value="10">10</option>'); $("#size").append('<option value="11">11</option>'); $("#size").append('<option value="12">12</option>'); $("#size").append('<option value="13">13</option>'); } else if(element.val() === "blk") { $("#size").append('<option value="7">7</option>'); $("#size").append('<option value="8">8</option>'); $("#size").append('<option value="9">9</option>'); $("#size").append('<option value="10">10</option>'); $("#size").append('<option value="11">11</option>'); $("#size").append('<option value="12">12</option>'); $("#size").append('<option value="13">13</option>'); } else if(element.val() === "nav") { $("#size").append('<option value="5">5</option>'); $("#size").append('<option value="6">6</option>'); $("#size").append('<option value="7">7</option>'); $("#size").append('<option value="8">8</option>'); $("#size").append('<option value="9">9</option>'); $("#size").append('<option value="10">10</option>'); } else if(element.val() === "sbl") { $("#size").append('<option value="5">5</option>'); $("#size").append('<option value="6">6</option>'); $("#size").append('<option value="7">7</option>'); $("#size").append('<option value="8">8</option>'); $("#size").append('<option value="9">9</option>'); $("#size").append('<option value="10">10</option>'); } else if(element.val() === "pnk") { $("#size").append('<option value="5">5</option>'); $("#size").append('<option value="6">6</option>'); $("#size").append('<option value="7">7</option>'); $("#size").append('<option value="8">8</option>'); $("#size").append('<option value="9">9</option>'); $("#size").append('<option value="10">10</option>'); } }); });

 <form action="#" method="post"> <p align="center"> <label for="color">Color: <select name="color" id="color"> <option value="brn">Brown</option> <option value="blk">Black</option> <option value="nav">Navy</option> <option value="sbl">Sky Blue</option> <option value="pnk">Pink</option> </select> </label> </p> <p align="center"> <label for="size">Size: <select name="size" id="size"> function(); </select> </label> </p> <div align="center"> <input type="submit" value="Add To Cart" /> </div> </form>

Answer 1

問題在於您的字符串，例如"<option value="5">5</option>" 。 您必須轉義雙引號，或改用單引號：

'<option value="5">5</option>'

或者，同樣有效：

"<option value='5'>5</option>"

另外，請注意 Stryner 的評論。

Answer 2

正如@ Glorfindel指出的那樣，您的options需要用單引號括起來。 此外，您可能希望在填充新選項之前empty()現有選項。

IE：

$("#size").empty();
$("#size").append('<option value="5">5</option>');
...

Answer 3

我怎樣才能使這個足夠動態以根據顏色改變可用尺寸？

Glorfindel 所說的基本問題是您的報價需要轉義。 （此外，由於您的尺寸值與您的選項相同，您實際上不需要為尺寸指定值）。

但是，我想我會提到一些我注意到的其他事情。 您聲明您希望使其具有足夠的動態性，以根據顏色更改可用尺寸。 每當您更改顏色時，您的 JavaScript 實際上都會附加新值，這意味着從一種顏色切換到另一種顏色將導致第一種顏色大小選項和第二種顏色選項。

為了解決這個問題，您需要在 size 元素上調用.empty()以便新選項將替換舊選項。

不過，我們可以做得更好！

通過調用$('#size')幾乎所有的行，我們正在創建的每個除了選項元素一個全新的jQuery對象。 此外，我們最終也會為該選擇器搜索 DOM。 你可以通過做一些不同的事情來使這個表現更好。

利用 jQuery 鏈接。

jQuery 中的大多數方法在執行完成后返回原始對象。 這意味着您可以一個接一個地繼續運行 jQuery 方法。 通過將您的調用鏈接在一起，您可以確保不必在每一行上創建一個新的 jQuery 對象。 這會讓你的 JavaScript 表現得更好（哪怕是一點點）。

例子：

// without chaining, creates a new jquery object on each line
$("#size").append("<option>7</option>");
$("#size").append("<option>8</option>");
$("#size").append("<option>9</option>");
$("#size").append("<option>10</option>");
$("#size").append("<option>11</option>");
$("#size").append("<option>12</option>");
$("#size").append("<option>13</option>");

// using chaining instead - uses the original jQuery object
$("#size").append("<option>7</option>")
    .append("<option>8</option>")
    .append("<option>9</option>")
    .append("<option>10</option>")
    .append("<option>11</option>")
    .append("<option>12</option>")
    .append("<option>13</option>");

所以。 如果我們添加鏈接，我們最終會得到一些性能更好的 JavaScript。 但是我們也經常調用.append() 。 每次我們調用.append()我們也會觸發reflow 。

減少回流

我們可以調用 append 一次並添加我們想要的元素，而不是多次調用 append 一次添加一個元素。 這使得我們不會告訴瀏覽器在不必要的情況下重排文檔。 （另外：這個概念類似於RActive 和 React通過創建 VirtualDOM 所做的）。

好吧，既然我們已經知道將要附加的內容，我們可以簡單地刪除所有附加內容並用一個巨大的字符串替換它們。

$("#size").append("<option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option>");

但是——這讓我的眼睛流血了。 它很丑。 所以讓我們再重構一下。

繼續重構

一個選項和下一個選項之間唯一不同的是實際數字大小。 開頭的<option>和結尾的</option>是相同的。 也許我們將其移到getOptions(color)類的方法中？

我們經常使用element.val()來獲取選定的顏色。 但是，我們不會將該element用於其他任何用途。 也許我們可以將該顏色存儲在一個變量中——這樣我們就不必一直獲取它？ var selectedColor = element.val();

此外，如果我們設置一個對象來包含我們的尺寸，我們可能會擺脫 if 語句。 該對象將包含顏色鍵值，然后是這些鍵的大小數組。

最終，我們可能會得到這樣的結果：

$("#color").change(function () {
    var selectedColor = $(this).val();

    // store an object with our sizes for each color
    var sizes = {
        'blk': [5, 6, 7, 8, 9, 10, 11, 12, 13],
            'brn': [7, 8, 9, 10, 11, 12, 13],
            'nav': [5, 6, 7, 8, 9, 10],
            'sbl': [5, 6, 7, 8, 9, 10],
            'pnk': [5, 6, 7, 8, 9, 10],
    }

    function getOptions(color) {
        // return an empty string if we don't have sizes for the given color
        if (!sizes.hasOwnProperty(color)) return '';
        var options = '';
        for (var i in sizes[color]){ 
            options = options + '<option>' + sizes[color][i] + '</option>'; 
        }
        return options;
    }

    // use .html() instead of .empty().append() to replace the entire contents of the element
    $("#size").html(getOptions(selectedColor));
});

並以小提琴形式： http : //jsfiddle.net/h1navan2/3/

這是一個開始。 您可能會找到更多重構方法。 但是，請記住我們所做的關鍵事情。

1. 我們嘗試只創建一次 jQuery 對象。 如果我們必須多次使用它，我們可以使用鏈接多次使用同一個 jQuery 對象。 或者，如果我們必須在多個地方使用它，那么我們可以將它存儲在一個變量中： var $sizes = $('#sizes'); . 然后我們可以使用該變量。
2. 我們通過只附加到 DOM 一次來減少回流/重繪。

無論如何，我知道這比你討價還價的要多得多。 但也許它會在未來有所幫助。 希望它有幫助。

祝你好運！ :)