javascript - 我如何拆分选择框选项的值并使用 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 甚至 plane 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 规则放入了外部样式表中。您应该尽可能避免内联样式。