Rendering of new pages

(1) text and Texarea add pages need not be initialized;

(2) The fixed options of radio, select and checkbox elements are not explained.

(3) Enumerated values of dynamically loaded radio s:

a and js mode

$.ajax({ 
        url:'${_baseUrl}/dd/getDatas', 
        type:'post', //Data transmission mode 
        dataType:'json', //Accept data format 
        data:{},
        async: false,
        success: function(data){
            for(var j=0;j<data.length;j++){
                    str += "<input type='radio' name='radioName' value='"+values[j].id+"'>";
                    str += "<span style='margin-left:10px'>"+values[j].name+"</span>";
                }
        },
        error:function(){
            layer.msg( "System error");
        }
  });

b. jstl mode

 <c:forEach var="item" items="${itemList}" varStatus="status">
    <input type="radio" name="radioName" value="+item.id+">
    <span style="margin-left:10px'>"+item.name+"</span>
 </c:forEach>

(4) checkbox is the same as radio without special explanation.

(5) Initialization of select

a and js mode

Write selec's html code first

<select name="dataName" id="dataId" onchange="setName(this)"></select>

Then initialize the options

$.ajax({ 
        url:'${_baseUrl}/dd/selectAllDatas', 
        type:'post', //Data transmission mode 
        dataType:'json', //Accept data format 
        data:{},
        async: false,
        success: function(data){
            $.each(data, function (i, item) {
                jQuery("#dataId").append("<option value="+ item.id+">"+ item.name+"</option>");
            }); 
           },
        error:function(){
            layer.msg( "System error");
        }
   });

b. jstl mode

<select name="dataName" id="dataId" onchange="setName(this)">
    <option value ="">Please choose</option>
    <c:forEach var="item" items="${itemList}" varStatus="status">
        <optionvalue ="${item.id }">${item.name}</option>
    </c:forEach>
</select>

c. If you want to get the name of the option, add it under select

<input type="hidden" id="dataNameId" name="dataNameId" value="" />

Each selection modification assigns the selection option value to the hidden variable, which can be passed to the background.

function setName(select){
    $("#"+select.id.replace("Id","Name")).val(select.selectedOptions[0].label);
}

Rendering and initialization of modified pages

js mode

(1) text and textarea assignments

$("#dataId").val(dataValue);

(2) radio assignment

$("input[type=radio][name='radioName'][value='"+radioValue+"']").attr('checked',true);

(3) checkbox assignment

$("input[type=checkbox][name='fieldName']").each(function (index, item) {
   if(filedValue.indexOf($(this).val()) >= 0){
        $(this).prop('checked',true);
    }
});

(4) select assignment

$("#selectId option").each(function () {
     var txt = $(this).val();
     if(txt == value){
         $(this).prop("selected","selected");
     }
});

jstl mode

(1) text and textarea assignments

<input type="text" name="dataName" id="dataId" value="${dataValue}"/>

<textarea name="dataName" id="dataId" >${dataValue}</textarea>

(2) radio assignment

RadiValue is the value passed from the background to the foreground. If the value of the option is the same as the value passed from the background, it will be selected.

<input type="radio" name="radioName" value="1" <c:if test="${radioValue == '1'}">checked="checked"</c:if>>open
<input type="radio" name="radioName" value="0" <c:if test="${radioValue == '0'}">checked="checked"</c:if>>Close

(3) checkbox assignment

Used in the same way as radio

<input type="checkbox" name="boxName" value="1" <c:if test="${boxValue == '1'}">checked="checked"</c:if>>open
<input type="checkbox" name="boxName" value="0" <c:if test="${boxValue == '0'}">checked="checked"</c:if>>Close

(4) select assignment

<select class="layout_table_select" name="selectId" id="selectId" >
    <option value ="">Please choose</option>
     <c:forEach var="item" items="${itemList}"  varStatus="status">
        <c:choose>
            <c:when test="${id eq item.id}">
                <option  value="${item.id}" selected="selected">${item.name}</option>
            </c:when>
            <c:otherwise>
                <option  value="${item.id}">${item.name}</option>
            </c:otherwise>
        </c:choose>
     </c:forEach>
</select>

perhaps

<select class="layout_table_select" name="selectId" id="selectId" >
     <option  value="${id}">${name}</option>
     <c:forEach var="item" items="${itemList}"  varStatus="status">
        <c:when test="${id != item.id}">
            <option  value="${item.id}">${item.name}</option>
        </c:otherwise>
     </c:forEach>
</select>

The first optio is the default, and the saved values are displayed by default.

3. Adding and Modifying Page Submitting to Get Numbers

(1) Get the values of text and textarea

var value = $("#id").val();

(2) Get the selected value of radio s

var value = $("input:radio:checked[name='radioName']").val();

(3) Get the checkbox checkbox checkbox value

var vals = [];
$("input:checkbox:checked[name='boxName']").each(function (index, item) {
     vals.push($(this).val());
});
fvar value = vals.join(",");

(4) Get the value of select

var value = $("#selectId option:selected").val();

This is the end. If you have any questions, please leave a message to exchange.