从包含在ID中的文本更新多个选项值

Question

修改 填充了两个选项的代码已更新。 = D我不禁想到，除了将它们分成两个单独的标签之外，还有更好的方法。

原始 这是一个半功能的脚本。它目前所做的是获取＃city-one的span ID中的文本，将其作为Option ID＃value1的文本/值放置，然后在选中时将该信息放入输入ID #CitySelected。

我遇到的主要问题是Option ID＃value2的值/文本没有变化。

City 1: <span id="city-one">Houston</span><br>
City 2: <span id="city-two">Boston</span>

<form>
<select name="city" id="city" class="cat_dropdown">
<option value="--Please Select--">--Please Select--</option>
<option id="value1" name="value1">Value 1</option>
<option id="value2" name="value2">Value 2</option>
</select>
<input name="CitySelected" type="text" id="CitySelected">
</form>

<script>
$('#city').change(function(){
    var selected_item = $(":selected", this).text()
        $('#CitySelected').val(selected_item).addClass('hidden');
});
$('#value2').text($('#city-two').text()).toFixed(2);
</script>
<script>
$('#value1').text($('#city-one').text()).toFixed(2);
</script>

第二个问题是，在检查新填充的输入ID #CitySelected时，代码如下所示：

<input name="CitySelected" type="text" value id="CitySelected">

等号和引号消失。这可能不是问题，但肯定看起来很奇怪。