这是我的问题。我想让第二个选择选项依赖于之前的选择选项。第一个选择选项决定鞋子的颜色。第二个选择选项尺寸基于鞋子的颜色。如何根据颜色改变可用尺寸？
这是我的代码：
<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>
答案 0 :(得分：2)
问题在于你的字符串，例如"<option value="5">5</option>"。您必须转义双引号，或改为使用单引号：
'<option value="5">5</option>'
或同样有效：
"<option value='5'>5</option>"
另外，请注意Stryner的评论。
答案 1 :(得分：0)
@ {strong> Glorfindel 指出，README.TXT (MarkoLaptop's conflicted copy 2015-01-21)需要用单引号括起来。此外，在填充新选项之前，您可能需要options现有选项。
即：
empty()答案 2 :(得分：0)
如何使其足够动态以根据更改可用尺寸 颜色？
Glorfindel stated的基本问题是您的报价需要转义。 （另外，由于您的尺寸值与您的选项相同，因此您实际上不需要为尺寸指定值）。
然而，我想我会提到一些我注意到的其他事情。您声明您希望使其足够动态，以便根据颜色更改可用的尺寸。每当您更改颜色时，您的JavaScript实际上会附加新值，这意味着从一种颜色切换到下一种颜色将导致第一个颜色大小选项和第二个选项。
为了解决此问题，您需要在尺寸元素上调用.empty()，以便新选项替换旧选项。
我们可以做得更好！
通过在几乎每一行上调用$('#size')，我们正在为option元素的每次添加创建一个品牌新的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 and 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/
这是一个开始。您可能会找到更多重构的方法。但是，请记住我们所做的关键事情。
var $sizes = $('#sizes');中。然后我们就可以使用那个变量了。无论如何，我知道这比你讨价还价的要多得多。但也许它将来会有所帮助。希望它有用。
祝你好运Javascripting！ ：）