如何拆分选择框选项的值并使用 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() {&nbsp; var location = $(this).val().split(',');&nbsp; $("#sCity").val(location[0]);&nbsp; $("#sRegion").val(location[1]);});#container {&nbsp; margin-top: 20px;&nbsp; width: 100%;&nbsp; display: block;}#city {&nbsp; font-size: 12px;&nbsp; margin-bottom: 20px;}#region {&nbsp; font-size: 12px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><div id="city">City Field&nbsp; <input placeholder="CITY" class="input-text" type="text" id="sCity" /></div><div id="region">Region Field&nbsp; <input placeholder="REGION" class="input-text" type="text" id="sRegion" /></div><div id="container">&nbsp; <select id="dropdowncities" class="dropdowncitymenu">&nbsp; &nbsp; <option value="">Select a Location...</option>&nbsp; &nbsp; <option value="Los Angeles,California">Los Angeles (California)</option>&nbsp; &nbsp; <option value="Miami,Florida">Miami (Florida)</option>&nbsp; </select></div>另请注意，我将 CSS 规则放入外部样式表中。您应该尽可能避免内联样式。