當用戶從下拉菜單中選擇一個選項時，如何更新任何歸檔的文本？

Question

我的UI如下圖所示：

我的主要目標是在用戶從下拉菜單中選擇一個選項時更新歸檔的文本。

---

變量

var section_num = $('#as-section-num');
var problem_set = $('#as-problem-set');
var start_time = $('#as-start-time');
var student_am = $('#as-student-am');
var due_time = $('#as-due-time');
var submit = $('#as-submit');
var avg_score = $('#as-avgscore');

var danger= $('#pc-danger');
var danger_list = $('#pc-danger-list');
var warning= $('#pc-warning');
var warning_list = $('#pc-warning-list');
var success= $('#pc-success');
var success_list = $('#pc-success-list');

賓語

var A =  {

      "section_num":"2.2",
      "problem_set":"Same",
      "start_time":"7/20/2015 10:00 am",
      "student_am":"9",
      "due_time":"7/20/2015 11:00 am",
      "submit":"9",
      "avg_score":"90",
      "danger":"5",
      "danger_list":"5,10,15,19,23",
      "warning":"8",
      "warning_list":"3,7,11,13,14,16,21,22",
      "success":"12",
      "success_list":"1,2,4,6,8,9,12,17,18,20,24,25",

    };

單擊時，我想將值設置為來自對象A那些字段。 我無法設置它。

$('#group-a').click(function () {

      section_num.innerHTML  = A.section_num;
      problem_set.innerHTML  = A.problem_set;
      start_time.innerHTML   = A.start_time;
      student_am.innerHTML   = A.student_am;
      due_time.innerHTML     = A.due_time;
      submit.innerHTML       = A.submit;
      avg_score.innerHTML    = A.avgscore;
      danger.innerHTML       = A.danger;
      danger_list.innerHTML  = A.danger_list;
      warning.innerHTML      = A.warning;
      warning_list.innerHTML = A.warning_list;
      success.innerHTML      = A.success;
      success_list.innerHTML = A.success_list;

    });

---

結果

我無法設置任何文本。 我的控制台出現0錯誤。

我希望有人能對此有所啟發。

這是我現在在我的JSFiddle上所擁有的

Answer 1

使用html而不是innerHTML ：

$('#group-a').click(function () {
    section_num.html(A.section_num);
    problem_set.html(A.problem_set);
    start_time.html(A.start_time);
    student_am.html(A.student_am);
    due_time.html(A.due_time);
    submit.html(A.submit);
    avg_score.html(A.avgscore);
    danger.html(A.danger);
    danger_list.html(A.danger_list);
    warning.html(A.warning);
    warning_list.html(A.warning_list);
    success.html(A.success);
    success_list.html(A.success_list);
});



$('#group-b').click(function () {
    section_num.html(B.section_num);
    problem_set.html(B.problem_set);
    start_time.html(B.start_time);
    student_am.html(B.student_am);
    due_time.html(B.due_time);
    submit.html(B.submit);
    avg_score.html(B.avgscore);
    danger.html(B.danger);
    danger_list.html(B.danger_list);
    warning.html(B.warning);
    warning_list.html(B.warning_list);
    success.html(B.success);
    success_list.html(B.success_list);

});

演示： http ： //jsfiddle.net/tusharj/c00p933w/1/

設置匹配元素集中每個元素的HTML內容。

文件： http ： //api.jquery.com/html

Answer 2

您需要通過html更改innerHtml 。

例如，代替：

section_num.innerHTML = A.section_num;

嘗試：

section_num.html(A.section_num);

Answer 3

您可以使用以下代碼

var section_num = $('#as-section-num');
    var problem_set = $('#as-problem-set');
    var start_time = $('#as-start-time');
    var student_am = $('#as-student-am');
    var due_time = $('#as-due-time');
    var submit = $('#as-submit');
    var avg_score = $('#as-avgscore');

    var danger= $('#pc-danger');
    var danger_list = $('#pc-danger-list');
    var warning= $('#pc-warning');
    var warning_list = $('#pc-warning-list');
    var success= $('#pc-success');
    var success_list = $('#pc-success-list');

    var A =  {
      "section_num":"2.2",
      "problem_set":"Same",
      "start_time":"7/20/2015 10:00 am",
      "student_am":"9",
      "due_time":"7/20/2015 11:00 am",
      "submit":"9",
      "avg_score":"90",
      "danger":"5",
      "danger_list":"5,10,15,19,23",
      "warning":"8",
      "warning_list":"3,7,11,13,14,16,21,22",
      "success":"12",
      "success_list":"1,2,4,6,8,9,12,17,18,20,24,25",
    };

    var B =  {
      "section_num":"2.3",
      "problem_set":"Not the same",
      "start_time":"6/19/2015 1:00 pm",
      "student_am":"9",
      "due_time":"6/19/2015 2:00 pm",
      "submit":"7",
      "avg_score":"100",
      "danger":"10",
      "danger_list":"11,12,13,14,15,16,17,18,19,20",
      "warning":"10",
      "warning_list":"1,2,3,4,5,6,7,8,9,10",
      "success":"5",
      "success_list":"21,21,23,24,25",
    };

$('.wrapper-dropdown-1 .group').click(function(){
   var id = $(this).attr('id');
    if(id == 'group-a'){
      section_num.html(A.section_num);
      problem_set.html(A.problem_set);
      start_time.html(A.start_time);
      student_am.html(A.student_am);
      due_time.html(A.due_time);
      submit.html(A.submit);
      avg_score.html(A.avgscore);
      danger.html(A.danger);
      danger_list.html(A.danger_list);
      warning.html(A.warning);
      warning_list.html(A.warning_list);
      success.html(A.success);
      success_list.html(A.success_list);
    }
    else if(id == 'group-b'){
      section_num.html(B.section_num);
      problem_set.html(B.problem_set);
      start_time.html(B.start_time);
      student_am.html(B.student_am);
      due_time.html(B.due_time);
      submit.html(B.submit);
      avg_score.html(B.avgscore);
      danger.html( B.danger);
      danger_list.html(B.danger_list);
      warning.html(B.warning);
      warning_list.html(B.warning_list);
      success.html( B.success);
      success_list.html(B.success_list);    
    }
 });