javascript - 从下拉列表中选择 'other' 时 jQuery 自动创建文本框？-6ren

javascript - 从下拉列表中选择 'other' 时 jQuery 自动创建文本框？

转载作者：行者123 更新时间：2023-11-30 10:50:16

我有一个充满国家/地区的下拉列表。当他们选择加拿大或美国时，一个单独的下拉列表会自动填充州/省。如果他们选择任何其他国家/地区，第二个下拉列表将填充“其他”和空白值。

我的问题是，如果他们选择了另一个国家，并且第二个下拉列表中填充了“其他”，我如何才能在第二个下拉列表下自动显示一个文本框，并将其动态绑定(bind)到“其他”值。换句话说，“其他”的值会在输入时动态填充文本框的值。因此，当提交表单时，第二个下拉菜单的值将与他们在文本框中键入的内容一起发布。

有人能帮忙吗？

这是我用来绑定(bind)国家和州/省下拉菜单的 jQuery 插件: https://github.com/adam12/jquery-state-select

<html>
  <head>
    <title>jQuery State Select Plugin Test</title>
    <script type="text/javascript" src="jquery-latest.pack.js"></script>
    <script type="text/javascript" src="jquery.selectboxes.pack.js"></script>
    <script type="text/javascript" src="jquery.stateselect.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $('#country').linkToStates('#province');
    });
    </script>
  </head>
  <body>
    <form>
      <p>
        <label>Province/State</label><br />
        <select name="province" id="province">
          <option value="">Please select a country</option>
        </select>
      </p>
      <p>
        <label>Country</label><br />
        <select name="country" id="country">
          <option>Please select</option>
          <option value="Canada">Canada</option>
          <option value="United States">United States</option>
        </select>
      </p>
    </form>
  </body>

部分插件代码:

 $.fn.extend({
        linkToStates: function(state_select_id) {
      $(this).change(function() {
        var country = $(this).attr('value');
        $(state_select_id).removeOption(/.*/);
        switch (country) {
          case 'Canada':
            $(state_select_id).addOption(canadian_provinces, false);
            break;
          case 'United States':
            $(state_select_id).addOption(us_states, false);
            break;
          default:
            $(state_select_id).addOption({ '' : 'Other'}, false);
            break;
        }
      });
    }
  });

最佳答案

你应该有一个单独的 Div:

<div id="hiddendiv">
    <input type="text" id="othertextbox" />
</div>

然后:

$(window).load(function()
{
    $("#hiddendiv").hide();
});

$("#ComboBox").change(function()
{
    if($("#ComboBox option:selected").text() == "Other")
    {
        $("#hiddendiv").show();
    }
});

$("#othertextbox").change(function()
{
    $("#ComboBox").val($("#othertextbox").text());
});

不过我还没有测试过这段代码，因此您可能需要对其进行调整。

关于javascript - 从下拉列表中选择 'other' 时 jQuery 自动创建文本框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5808015/