获取下拉框的值并通过拼接方式添加到td后面

Posted 2021-03-16 xuhk1819

html:
<tr>
    <td class="Hint"><span class="color-red">*</span>选择分组：</td>
    <td width="40%">
        <select id="groupId2" style="width: 80%;height: 30px">
            <option th:if="${groupList}" th:each="obj : ${groupList}" th:value="${obj.id}"
                    th:text="${obj.groupName}"></option>
        </select>
    </td>
    <td>
        <button class="btn btn-primary btn-small" onclick="groupAdd.AddGroupId();">
            <i class="glyphicon glyphicon-plus"></i>增加分组
        </button>
    </td>
</tr>
<tr id="selected">
    <td class="Hint" id="groupIdList"><span class="color-red">*</span>已选分组：</td>
    <td id=groupIdList1 width="5%" colspan="2"></td>
</tr>

js:

AddGroupId:function(){

        var groupId=$(‘#groupId2‘).val().trim();
        var groupName=$(‘#groupId2‘).find(‘option:selected‘).text();
        var v_content = "<p class=‘groupA‘><span groupId=""+groupId+"" groupName=""+groupName+"">"+groupName+" </span>"+
            "<a href="javascript:void(0);" onclick=‘groupAdd.deleteGroupId(this)‘>删除 </a></p>";
            $("#groupIdList1").append(v_content);
},
效果图：

 

 

1.获取下拉框选项的value值：$(‘#groupId2‘).val().trim();
2.获取下拉框选项的text值：groupName=$(‘#groupId2‘).find(‘option:selected‘).text();
3.通过<p>标签 ，<span>标签，<a>标签将获取的下拉框框数据值拼接成html格式，再通过append方法添加到<td>标签后面。
4.<span>标签中可用groupId="groupId"形式，添加参数值。