jQuery - 在选择更改时设置元素的 html答案

【问题标题】：jQuery - Set html of an element on select changejQuery - 在选择更改时设置元素的 html
【发布时间】：2013-02-23 14:18:38
【问题描述】：

我有一个名为 JobsList 的选择元素，我需要它来设置另一个元素 jobDesc 的 html 值。我不明白我需要做什么，或者从哪里开始，我对 jQuery 比较陌生。

它必须将元素的文本设置为为每个选项预定义的内容，例如如果选择的选项是 Citizen，它会将 jobDesc 设置为“您在社会中没有真正的角色”。

【问题讨论】：

显示您的 html 代码或在 jsfiddle.net 中设置小提琴
显示一些代码。请编辑您的问题并添加格式良好的 html 以及您已有的脚本
我有 HTML，但没有 jQuery，我不知道从哪里开始。
@user2142702 将 HTML 代码粘贴到您的问题中或转到 JSfiddle.net 网站，然后粘贴 html 和 sav，然后分享链接

标签： jquery select text

【解决方案1】：

var job_list_value = $('#JobsList').val();
var message;

if (job_list_value === "Citizen") {
    message = "You have no real role in society");
} else if (job_list_value === "other") {
    message = "other statement";
} else {
    message = 'Default';
}

$('#elementId').html(message);

【讨论】：

【解决方案2】：

if($('#JobsList').val() == "Citizen")
   $('#elementId').html("You have no real role in society");
else    if($('#JobsList').val() == "other")
   $('#elementId').html("other statement");

如果选择选项更多，则使用 switch 而不是 if-else。

在使用此代码之前导入 jQuery 文件。

【讨论】：

【解决方案3】：

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Javascript

// # is used for filtering by element ID
    if($('#JobsList').val() == "Citizen")
       $('#jobDesc').html("You have no real role in society");
    else    if($('#JobsList').val() == "other")
       $('#jobDesc').html("other statement");

【讨论】：

【解决方案4】：

看看你的html是不是这样的：

html:

<select id='joblist'>
  <option value='0'>---job list---</option>
  <option value='Student'>Student</option>
  <option value='Citizen'>Citizen</option>
</select>
<div id='jobdesc'></div>

那么 jQuery 应该是：

$(function(){
     $('#joblist').change(function () {
         if ($(this).val() == 'Student') {
             $('#jobdesc').html('You need to study good things.');
         } else if ($(this).val() == 'Citizen') {
             $('#jobdesc').html('"You have no real role in society" it\'s not true.');
         } else {
             $('#jobdesc').html('Please choose a job from above list.');
         }
     }).change();
});

CHECKOUT THIS FIDDLE

【讨论】：

【解决方案5】：

使用更改事件来跟踪更改的事件...并放置值...

试试这个

 $('#joblistID').change(function(){
    if($(this).val() == "Citizen"){
        $('#elementId').val("You have no real role in society");//if input
        $('#elementId').text("You have no real role in society");// or if otner element
    }
 });

您可以以类似的方式为他人工作..

或创建一个选项值数组

html

...
<option value="citizen">Citizen</option>
<option value="test">Test</option>
....

jquery

 var a= new Array();
a['citizen']='You have no real role in society';
a['test']='test word'
.....
$('#joblistID').change(function(){
        var currvalue=$(this).val();
        $('#elementId').val(a[currvalue]);//if input
        $('#elementId').text([currvalue]);// or if otner element

 });

【讨论】：