Question

我喜欢这样的

<tr>
   <td><input id="checked1" type="checkbox" class="cd" value="1" style="margin:6px 0 0 0;"></td>
   <td style="padding:6px 0 0 0;"><b>Staff Courtesy</b></td>
   <td>
      <select name="questionType" id="questionType" class="qType QSelect" style="padding:3px;">
         <option value="">--Select--</option>
         <option value="1">text</option>
         <option value="2">rating</option>
         <option value="3">boolean</option>
         <option class="show-checkboxes" value="4">option</option>
      </select>
   </td>
   <td width="35%" style="padding:10px 0 0 0;" class="Fsize12 out" id="a1">Enter Some Text</td>
   <td><input type="hidden" id="optionInputa1"></td>
</tr>

最初第3个td没有显示任何内容，但如果下拉列表发生变化，则第3个td中会出现一些文字

例如，如果选择了文本，那么在第3个td中它将显示文本的地方。它的代码如下

var option='<a href="#" class="checkbox-inline" onclick="getModal(this)">Get Options</a>';
     var txt = 'Enter Some Text';
     var bool = 'Yes or No';
     var rating='place for rating';
     $('#addNew .QSelect').change(function () { //alert(this.value);
         if (this.value == '4') $(this).closest('tr').find('.out').html(option);
         if (this.value == '1') $(this).closest('tr').find('.out').html(txt);
         if (this.value == '3') $(this).closest('tr').find('.out').html(bool);
         if (this.value == '2') $(this).closest('tr').find('.out').html(rating);
     });

     $('#addNew .QSelect').change(function() {
            var cbs = $(this).closest('td').next().children();
            if ($('.show-checkboxes', $(this)).is(':selected')) {
                $(cbs).show();
            } else {
                $(cbs).hide();
            }
        }).trigger('change');

        $('#addNew .cd').change(function() {
            var checked = $(this).is(':checked');
           // $('#optionSave').removeAttr('disabled');
           if ($(".cd:checkbox:checked").length > 0)
{

               $('#optionSave').removeAttr('disabled');
}
else
{

    $('#optionSave').attr('disabled',true);
}
            $(this).closest('td').siblings().find('select, input').prop('disabled', !checked); 
        }).trigger('change');
}

我的问题 我想以编程方式设置dropdown的值。例如，如果我想将drop设置为text，那么我必须将其值设置为1.

这是它的代码

$.each(data1.savedQuestionTypesList, function(index, currQueTyp) {
                    console.log("queeeeeeeeeeeee  "+currQueTyp.pqid.qid.id + "qtid name"+currQueTyp.qtid.name);
                    $('#checked'+currQueTyp.pqid.qid.id).closest('tr').find('select').val(currQueTyp.qtid.id);


                });

因此，当下拉值发生变化时，第3个td也会发生变化。

例如

在上面的每个循环中，如果currQueTyp.pqid.qid.id=1和currQueTyp.qtid.id=1，则下拉列表会更改为text，而在第3个td 位置会显示文本。< / p>

但是，如果我使用按钮，那么为什么第3个td不会改变。

例如，有按钮

<button type="button" id="testButton">test</button> and upon clicking I want to change the drop down value

$('#testButton').click(function(){

                    $('#checked1').closest('tr').find('select').val(1);

});

所以这里的下拉值会改变，但第三个td不会改变

Fiddle here

Answer 1

<强> Working Demo

将此用于按钮事件

在你的情况下，#checked1是一个完全错误的选择器。你有多个具有相同ID的复选框。那不会奏效。在这种情况下使用类选择器。
您需要选中复选框:checked。

$('#testButton').click(function(){

    $('.cd:checked').closest('tr').find('select').val(1).change();

});

如何在td中动态追加html

1 个答案: