1

我想根据在第一个选择框中选择的内容，用适当的值填充我的第二个选择框。

这是我到目前为止所做的，但它不起作用。HTML：

    <form id = "step1">
                <p>
                    Creator:
                    <select name="creator" id = "creator">
                        <option></option>
                        <option name = "hello" value = "hello">Hello</option>
                        <option name = "abc"> oiasfn</option>
                    </select>
                </p>
                <p>
                    Trip Title:
                    <select name="title" id = "title">
                        <option></option>
                    </select>
                </p>
</form>

Javascript/Jquery：

$(document).ready(function(){
    updateform();

});

function updateform(){
    document.getElementById("creator").onchange = populatetitle;
}

function populatetitle(){
    var select = document.getElementById("creator");
    if(select.options[select.selectedIndex].value = "hello"){
        select.options.add(new Option('Byebye', 'Bye'));
    }
}
4

4 回答 4

2

您的代码有几个问题：

在线11，您应该使用==or===进行相等比较，但您错误地使用=：

if(select.options[select.selectedIndex].value = "hello"){

再次在线13，您错误地将“再见”选项添加到同一个选择中，但我假设您想将其添加到#title选择中：

document.getElementById("title").options.add(new Option('Byebye', 'Bye'));

此外，您的代码不是惯用的 jQuery。您正在使用 jQuery 和本机 DOM API 的混合，这使您的代码混乱。此外，恕我直言，您可以为函数和变量使用更好的名称：

$(document).ready(function(){
    observeCreator();
});

function observeCreator() {
  $("#creator").change(onCreatorChanged);
}

function onCreatorChanged() {
  var creatorSelect = $(this);
  var titleSelect = $("#title");
  var options;

  if (creatorSelect.val() == "hello") {
     options = $("<option></option><option value='bye'>Bye</option>");
    titleSelect.html(options);
    titleSelect.val("bye");
  } else {
    options = $("<option></option>");
    titleSelect.html(options);
    titleSelect.val("");
  }
}

最后，如果这不是您的意图，请确保不要Bye多次将选项添加到选择中。#title

于 2013-07-16T04:00:52.407 回答
2

您的代码的问题是您将值添加到第一个选择框。您需要更改select.options.add(new Option('Byebye', 'Bye'));为select2.options.add(new Option('Byebye', 'Bye'));

在哪里

var select2 = document.getElementById("title");

另一个解决方案是我编写的一些代码。这完全一样，但使它更具活力。

这是JSFIDDLE

代码：

$(document).ready(function () {
    $('#creator').change(function () {
        populatetitle();
    });
});

//Set the values for the select boxes
var values = {"hello":
                 {
                     "ByeBye":"Bye",
                     "text":"value",
                     "value":"Bye2",
                 },
              "abc":
                 {
                     "ABC":"text",
                     "text":"value"
                 },
              "selectBox1value":
                  {
                      "SelectBox2Text":"SelectBox2Value"
                  },
              "": //Default case
                  {
                      "text":"value"
                  }
              };

function populatetitle() {
    var firstSelect = $("#creator");
    var secondSelect = $("#title");
    var valuesForSecondSelect = values[firstSelect.val()]; //get values based on 1st selection box
    secondSelect.empty(); // remove old options
    $.each(valuesForSecondSelect, function(key, value) {
        //loop through all values for 2nd box and add them
        secondSelect.append($("<option></option>")
                   .attr("value", value).text(key));
    });
}
于 2013-07-16T04:22:50.147 回答
1

问题可能源于您没有将其添加到第二个select，而是第一个。但是，我没有检查这一点，因为您已经在使用 jquery，您也应该将它用于更改事件处理程序。这会让事情变得容易得多。

$(document).ready(function(){
    $('#creator').on('change', function() {
        var $title = $('#title').empty();
        if ($(this).val() == 'hello') {
            $title.append('<option value="Bye">Bye bye</option>');
        }
    });
});
于 2013-07-16T03:42:14.657 回答
1

这是小提琴

$(document).ready(function () {
    $('#creator').change(function () {
        populatetitle();
    });
});

function populatetitle() {
    var firstSelect = document.getElementById("creator");
    var secondSelect = document.getElementById("title");
    if (firstSelect.options[firstSelect.selectedIndex].value === "hello") {
        var option = document.createElement("option");
        option.text = "Byebye";
        option.value = "Bye";
        secondSelect.add(option, null);
    }
}
于 2013-07-16T03:47:48.090 回答