前端小技巧

最新推荐文章于 2023-09-07 08:05:29 发布

fengyehongWorld

最新推荐文章于 2023-09-07 08:05:29 发布

阅读量112

点赞数

分类专栏：前端 # JS 文章标签： javascript jquery es6

本文链接：https://blog.csdn.net/feyehong/article/details/117533135

版权

JS 同时被 2 个专栏收录

52 篇文章 1 订阅

订阅专栏

前端

8 篇文章 0 订阅

订阅专栏

select2下拉框的使用

<tr>
    <td>
        <select id="simHatyubusyo" th:field="*{simHatyubusyo}" class="select2" disabled>
            <option th:each="c:*{hachusakiTantobushoList}" 
                    th:value="${c.id}" th:text="${c.text}"></option>
        </select>
    </td>
</tr>
<tr>
    <td>
        <select id="simHatyubusyo2" th:field="*{simHatyubusyo2}" class="select2" disabled>
            <option th:each="c:*{hachusakiTantobushoList}" 
                    th:value="${c.id}" th:text="${c.text}"></option>
        </select>
    </td>
</tr>
<tr>
    <td>
        <select id="simHatyubusyo3" th:field="*{simHatyubusyo3}" class="select2" disabled>
            <option th:each="c:*{hachusakiTantobushoList}" 
                    th:value="${c.id}" th:text="${c.text}"></option>
        </select>
    </td>
</tr>
<tr>
    <td>
        <select id="simHatyubusyo4" th:field="*{simHatyubusyo4}" class="select2" disabled>
            <option th:each="c:*{hachusakiTantobushoList}" 
                    th:value="${c.id}" th:text="${c.text}"></option>
        </select>
    </td>
</tr>

$("#simHatyubusyo,#simHatyubusyo2,#simHatyubusyo3,#simHatyubusyo4").each(function(item) {
	// 要想select2中放入的数据
	var sdataList = [
	    {id: 1, text:'OPS-COFFEE-1'},
	    {id: 2, text:'OPS-COFFEE-2'},
	    {id: 3, text:'OPS-COFFEE-3'}
	]
	
	// 向select2下拉列表中放入数据之前,先清空掉原有的数据
	// ⭕⭕⭕
	// 只能通过这个select2自带的API来清空下拉列表
	$(this).empty();
	
    // 向当前的select2中放入数据
    $(this).select2({
        // data: singleData.hachusakiTantobushoList,
        data: sdataList 
    });
	
    // 移除当前下拉框的不可用属性
    $(this).removeAttr("disabled");
	
	// 获取下拉框选中的文字
    let word = $(this).select2('data')[0].text;
	
	// 设置select2被默认选中的值
	$(`select2对象`).val(需要被选中的id).select2();
});

// 隐藏select2的搜索框,让下拉列表没有检索功能,变为普通的下拉列表
$('select2对象').select2({
    minimumResultsForSearch: -1
});

for (var i = 0; i < jtv010NyusatsukaishaFormCount; i++) {
    // 枝番(1から連番する)
    sinEdano = singleData.jtv010NyusatsukaishaFormList[i].sinEdano - 1;
    // 入札会社コード
    sinNyusyacd = singleData.jtv010NyusatsukaishaFormList[i].sinNyusyacd.toString();
    
    // 向select2下拉框中放入值
    $(`#sinNyusyacd${sinEdano}`).select2({
        // eval()函数的妙用
        data: eval(`singleData.nyusatsuKaishaList${sinEdano + 1}`),
    });
    
    // 指定select2下拉框要选中的值
    $(`#sinNyusyacd${sinEdano}`).val(sinNyusyacd).select2();
}

eval函数的使用

for (var i = 0; i < gijyutsuTableCount; i++) {
    eval(`submitData.jtaTanSyu${i + 1} = 
		$('#jtaTanSyu${i + 1}').prop('checked') ? 1 : 0`);
    
    if ($(`#jtaTanSyu${i + 1}`).prop('checked')) {
        jtaTanSyacd = $(`#jtaTanSyacd${i + 1}`).val();
    }
}

checkbox设置单选

<table id="gijyutsuTable" class="border_table">
    <tr>
        <td style="width: 50px;">
            <input id="jtaTanSyu1" th:checked="*{jtaTanSyu1} eq '1'" type='checkbox' />
        </td>
    </tr>
    <tr>
        <td style="width: 50px;">
            <input id="jtaTanSyu2" th:checked="*{jtaTanSyu2} eq '1'" type='checkbox' /> 
        </td>
    </tr>
    <tr>
        <td style="width: 50px;">
            <input id="jtaTanSyu3" th:checked="*{jtaTanSyu3} eq '1'" type='checkbox' />
        </td>
    </tr>
</table>

$("#gijyutsuTable input:checkbox").on("click", function(obj) {
    // 当点击的时候给所有的checkbox取消选中
    $("#gijyutsuTable input:checkbox").each(function(index, chekboxItem) {
        $(chekboxItem).prop('checked', false);
    });
    
    // 只给当前checkbox设置为选中
    $(obj.target).prop('checked', true);
});