Question

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

这是我到目前为止所做的，但它不起作用。 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'));
    }
}

Answer 1

您的代码存在一些问题：

在11行，你应该使用==或===进行相等比较，但是您错误地使用了=：

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选项。

Answer 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));
    });
}

Answer 3

问题很可能源于你没有将它添加到第二个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>');
        }
    });
});

Answer 4

这是 FIDDLE

$(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);
    }
}

如何根据在另一个选择框中选择的内容填充选择框？

4 个答案: