Question

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

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

Answer 1

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

Answer 2

要向select元素添加值，需要添加具有适当text和value属性的option元素。所以你可以这样做：

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;

Answer 3

我建议包括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');

Answer 4

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

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

DEMO： http://jsfiddle.net/J8YrU/1/

现在，对于单击的复选框和正在更改的Shipping City文本框值，都会调用此函数。

这个功能的作用是：

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

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

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

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

JavaScript - onClick复制文本字段值以下拉字段

4 个答案: