onClick 复制文本字段值到下拉字段答案

【问题标题】：onClick copy text field value to drop down fieldonClick 复制文本字段值到下拉字段
【发布时间】：2013-04-13 00:53:38
【问题描述】：

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

    <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>

【问题讨论】：

结算城市是否需要成为下拉菜单而不是文本字段？
是的，因为我们需要用户能够在他们愿意的情况下默认批量复制数据，而且还能够更改为下拉列表中的标准值列表。
f.billingcity.value = f.shippingcity.value;。例如，如果用户输入“City 3”，则“Billing City”下拉菜单中的第三个选项将被选中
对，但是如果下拉值与前一年相比发生了变化怎么办？有没有办法在下拉选择中设置一个新的初始值？
@BvilleBullet 因此，如果用户在“计费”下拉列表中输入了 isn't 的内容，您是否希望它在计费下拉列表中添加新项目？还是你想让它做别的事情？

标签： javascript dom-events

【解决方案1】：

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

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”
在文本框中输入“City 2”

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

【讨论】：

【解决方案2】：

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

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;

【讨论】：

看看stackoverflow.com/questions/1513286/… Mr Rob 和接受的答案。

【解决方案3】：

您需要有效地使用 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;

【讨论】：

getElementById 这个问题根本不需要。
是的，但话又说回来，这是推荐的做事方式。
谁推荐的？表单控件必须有一个名称才能成功，因此您不妨使用现有属性/属性来利用属性访问，而不是添加另一个属性/属性并调用方法。
我会找到合适的文档，但我记得使用表单字段中的“名称”早已不再适用。
@meewoK 我希望我知道为什么它在过去更受欢迎......我知道getElementById 一直总是可用。我反对使用getElementById 是虚伪的，因为我的解决方案是按照你的建议去做（尽管我一开始就不会遗漏id 属性）。同时，OP 已经有一个结构，其中传递了回调this.form。从那里，很容易按名称找到表单元素。在其他情况下，必须执行 document.forms[0].elementName 或 document.formName.elementName 之类的操作可能会很困难/具有误导性

【解决方案4】：

我会推荐包括 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);
  }

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

另外，正如另一位用户所建议的，最好给 select 一些 id（例如 selectIdentificator），然后像这样更新上面的代码

var $firstCity = $('#selectIdentificator option:first-child');

【讨论】：

我不建议包含像 jQuery 这样的大型库来进行如此简单的操作。