1

我一直在研究如何将文本字段值复制到下拉菜单中，并且只看到了如何完成相反的操作。有人可以帮我调整此代码，以便将运输城市值（文本字段）复制到计费城市（下拉菜单）吗？

    <html>
    <head>
    <title>Untitled Document</title>
    </head>

    <body>
    <P>
    <script type="text/javascript">
    <!--
    function FillBilling(f) {
      if(f.billingtoo.checked == true) {
      f.billingname.value = f.shippingname.value;
      f.billingcity.value = f.shippingcity.value;
      }
    }
    // -->
    </script>
    <TABLE BORDER=1><TR><TD BGCOLOR="eeeeee">
    <b>Mailing Address</b>
    <br><br>
    <form>
    Name:
    <input type="text" name="shippingname">
    <br>
    City:
    <input type="text" name="shippingcity">
    <br>
    <input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)">
    <em>Check this box if Billing Address and Mailing Address are the same.</em>
    <P>
    <b>Billing Address</b>
    <br><br>
    Name:
    <input type="text" name="billingname">
    <br>
    City:
    <select name="billingcity">
    <option value="City 1">City 1</option>
    <option value="City 2">City 2</option>
    <option value="City 3">City 3</option>
    </select>
    </form>
    </TD></TR></TABLE>
    </body>
    </html>
4

4 回答 4

0

这有点乱，但这是我对你似乎想要的东西的尝试：

function FillBilling(f) {
    if (f.billingtoo.checked === true && f.shippingcity.value) {
        f.billingname.value = f.shippingname.value;

        var found = false;
        for (var i = 0; i < f.billingcity.options.length; i++) {
            if (f.billingcity.options[i].value.toLowerCase() === f.shippingcity.value.toLowerCase()) {
                f.billingcity.selectedIndex = i;
                found = true;
                break;
            }
        }
        if (!found) {
            var extraOption = f.billingcity.getAttribute("data-extra-option");
            if (extraOption) {
                f.billingcity.options[f.billingcity.options.length - 1].text = f.shippingcity.value;
                f.billingcity.options[f.billingcity.options.length - 1].value = f.shippingcity.value;
            } else {
                var newOption = new Option(f.shippingcity.value, f.shippingcity.value);
                f.billingcity.setAttribute("data-extra-option", "true");
                f.billingcity.appendChild(newOption);
                f.billingcity.selectedIndex = f.billingcity.options.length - 1;
            }
        } else {
            if (f.billingcity.getAttribute("data-extra-option")) {
                f.billingcity.removeChild(f.billingcity.options[f.billingcity.options.length - 1]);
                f.billingcity.selectedIndex = 0;
            }
        }
    } else {
        if (f.billingcity.getAttribute("data-extra-option")) {
            f.billingcity.removeChild(f.billingcity.options[f.billingcity.options.length - 1]);
            f.billingcity.selectedIndex = 0;
        }
    }
}

演示：http: //jsfiddle.net/J8YrU/1/

现在，这个函数在被点击的复选框和正在更改的 Shipping City 文本框值时都被调用。

这个函数的作用是：

  • 如果在文本框中键入的文本与现有的下拉选项匹配，它会选择该值
  • 如果在文本框中输入的文本与现有的下拉选项不匹配，它将在用户输入的末尾附加一个新选项，然后选择它
  • 如果在文本框中键入的文本与现有的下拉选项不匹配，但已经添加了一个新的自定义选项（来自最后一个项目符号），它只会更新其文本/值。

所以测试一下，试试这些东西：

  • 在文本框中输入“City 3”
  • 在文本框中输入“asdf”
  • 在文本框中输入“asdf3”
  • 在文本框中输入“城市 2”

您可以在尝试每件事后检查下拉列表的状态，看看它发生了什么。此外，您也可以随时切换复选框以进行测试。

于 2013-04-13T02:09:46.780 回答
0

我建议包括 jquery，然后做这样的事情：

function FillBilling(f) {
  if(f.billingtoo.checked == true) {
    var $firstCity = $('select option:first-child');
    $firstCity.attr('text', f.shippingcity.value);
    $firstCity.attr('value', f.shippingcity.value);
  }

这应该将选择的第一个选项更新为用户输入的城市

同样正如另一个用户所建议的那样，最好给选择一些 id（例如 selectIdentificator），然后像这样更新上面的代码

var $firstCity = $('#selectIdentificator option:first-child');
于 2013-04-13T01:31:58.040 回答
0

您需要有效地使用 ID 和 document.getElementById 以便在单击按钮时获取正确的表单元素并重新分配 dropbox/select 中的值。

<html>
<head>
<title>Untitled Document</title>
</head>

<body>
<P>
<script type="text/javascript">
<!--
function FillBilling(f) {
  if(f.billingtoo.checked == true) {

  document.getElementById("billingname").value = document.getElementById("shippingname").value;

  var optn = document.createElement("OPTION");
  optn.text = document.getElementById("shippingcity").value;;
  optn.value = document.getElementById("shippingcity").value;;;
  document.getElementById("billingcity").options.add(optn);
  }
}
// -->
</script>
<TABLE BORDER=1><TR><TD BGCOLOR="eeeeee">
<b>Mailing Address</b>
<br><br>
<form>
Name:
<input type="text" name="shippingname" id="shippingname">
<br>
City:
<input type="text" name="shippingcity" id="shippingcity">
<br>
<input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)">
<em>Check this box if Billing Address and Mailing Address are the same.</em>
<P>
<b>Billing Address</b>
<br><br>
Name:
<input type="text" name="billingname" id="billingname">
<br>
City:
<select id="billingcity" name="billingcity">
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
<option value="City 3">City 3</option>
</select>
</form>
</TD></TR></TABLE>
</body>
</html>

为了更改选择值而不是添加，您将使用：

document.getElementById("billingcity").value=document.getElementById("shippingcity").value;
于 2013-04-13T00:56:01.573 回答
0

要将值添加到选择元素，您需要添加具有适当文本和值属性的选项元素。所以你可能会这样做：

var select = f.billingcity;

// Create a new option element, passing values for the text and value proprties
var option = new Option(f.shippingcity.value, f.shippingcity.value);

// Append the option to the select
select.appendChild(option);

// Make the new option the selected option
option.selected = true;
于 2013-04-13T01:08:59.907 回答