Question

大家好我一直都在网上搜索（不只是堆栈溢出），我无法直接找到答案。也许这就是我的搜索方式？但这里是我有一个选择的HTMl元素（如下例中的那个）。我正在尝试使用jquery（除非有更好的方法）更新我的网站上的段落部分，具体取决于选择中选择的内容。

例如

<select id ="work">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

<p id="updatedparagraph">
updated text here.
updated text here.
updated text here
</p>

默认情况下它应该以A开头，因此段落部分中的文本设置为默认值。但是如果选择了下拉菜单并设置为B或C，我希望文本根据所选择的内容而改变。有关如何正确完成此任务的任何想法？

Answer 1

根据OP的评论，以便根据下拉列表中的值显示相应的段落部分。

<select id ="work">
<option value="updatedparagraph">a</option>
<option value="updatedparagraph1">b</option>
<option value="updatedparagraph2">c</option>
</select>
<p id="updatedparagraph">
history will go.
history will go.
history will go.
history will go.
</p>
<p id="updatedparagraph1">
history will not  go.
history will not go.
history will not go.
history will not go.
</p>
<p id="updatedparagraph2">
history will never go.
history will never go.
history will never go.
history will never go.
</p> 



 <script>
    $(document).ready(function(){
    $('#work').change(function()
    {
      $('[id^=updatedparagraph]').hide();  // hide all paragraph tag that starts with id = updatedparagraph
      $('#' + this.value).show(); // extract the value from the dropdown , locate that paragraph with id = value and show it.
    }).change();  // trigger change event as soon as the dropdown is loaded - optional.


});
</script>

示例：http://jsfiddle.net/DinoMyte/X6jzs/31/

如果您希望将特定文本动态插入单个段落字段，则可以创建具有键值对的对象。

var obj = {'a': 'Hello a', 'b': 'Hello b','c': 'Hello c'};

$('#work').change(function()
{
  $('#updatedparagraph').text(obj[this.value]);
}).change();

示例：http://jsfiddle.net/DinoMyte/X6jzs/42/

根据选择选项修改元素

1 个答案: