如何拆分选择框选项的值并使用 jquery 或 javascript 在两个不同的输入字段中传递它？

Question

这是我的代码：$(".dropdowncitymenu").change(function () {    $("#sCity").val($(this).val());    $("#sRegion").val($(this).val());});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><div style="font-size:12px;margin-bottom:20px;">City Field<input placeholder="CITY" class="input-text" type="text" id="sCity" /></div><div style="font-size:12px">Region Field<input placeholder="REGION" class="input-text" type="text" id="sRegion"/></div><div style="margin-top:20px;width:100%;display:block;"><select id="dropdowncities" class="dropdowncitymenu"><option value="">Select a Location...</option><option value="Los Angeles (California)">Los Angeles (California)</option><option value="Miami (Florida)">Miami (Florida)</option></select></div>我如何使用 jquery 甚至飞机 javascript 来实现它，所以当我从选择框中选择一个位置时，将城市传递到城市输入字段，并将区域相应地传递到区域输入字段？

Answer 1

实现这一点的最简单方法value是用单个字符分隔属性中的城市/州，然后您可以split() 创建一个数组。然后您可以将结果数组的元素设置为文本字段的值。在下面的示例中，我用作,分隔符，但只要不在值本身中使用，任何东西都可以使用。尝试这个：

$(".dropdowncitymenu").change(function() {

  var location = $(this).val().split(',');

  $("#sCity").val(location[0]);

  $("#sRegion").val(location[1]);

});

#container {

  margin-top: 20px;

  width: 100%;

  display: block;

}

#city {

  font-size: 12px;

  margin-bottom: 20px;

}

#region {

  font-size: 12px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div id="city">City Field

  <input placeholder="CITY" class="input-text" type="text" id="sCity" />

</div>

<div id="region">Region Field

  <input placeholder="REGION" class="input-text" type="text" id="sRegion" />

</div>

<div id="container">

  <select id="dropdowncities" class="dropdowncitymenu">

    <option value="">Select a Location...</option>

    <option value="Los Angeles,California">Los Angeles (California)</option>

    <option value="Miami,Florida">Miami (Florida)</option>

  </select>

</div>

另请注意，我将 CSS 规则放入外部样式表中。您应该尽可能避免内联样式。