Heim >Backend-Entwicklung >PHP-Tutorial >javascript – So ändern Sie die dynamische Auswahl in ein UL-Navigationsformular. Bitten Sie um Führung.
Sehen Sie sich den Code an.
<code> <!-- 大系列 --> <td style="visibility: hidden;">{$lang.big_series}<select name="big_cate_id" id="big_cate_id"> <option value="">{$lang.please_select}</option> {foreach from=$big_series item=big}<option value="{$big.sapval}" rel="{$big.cat_id}">{$big.cat_name}</option>{/foreach} </select> </td> </tr> <!-- 小系列 --> <!-- <td>{$lang.sub_series}<select name="sub_cate_id" id="sub_cate_id" onchange="searchGoods();"> <option value="">{$lang.please_select}</option> {foreach from=$sub_series item=sub}<option value="{$sub.sapval}" class="s{$sub.parent_id}">{$sub.cat_name}</option>{/foreach} </select> </td> --> <!-- 商品号or商品名 --> <tr> <td align="center"> <input type="text" name="keyword" size="15" placeholder="产品名(号)" style="height:19px;line-height:19px;" /> <input type="submit" value="搜索产品" class="button" /> </td> </tr> <tr> <td>{$lang.sub_series}<select name="sub_cate_id" id="sub_cate_id" onchange="searchGoods();" size="20"> {foreach from=$sub_series item=sub}<li value="{$sub.sapval}" class="s{$sub.parent_id}">{$sub.cat_name}</li>{/foreach} </select> </td> </tr> $(document).ready(function(){ $('#big_cate_id').change(function(){ var sapval = $(this).val(); var cat_id = 0; $(this).find('option').each(function(){ if($(this).attr('value') == sapval){ cat_id = $(this).attr('rel'); } }); $('#sub_cate_id').empty(); $('#sub_cate_id').append('<option value="">{$lang.please_select}</option>'); if(sapval == ''){ for(var i=0,len=subcate.length; i<len; i++){ $('#sub_cate_id').append("<option value='"+ subcate[i].sapval +"'>" + subcate[i].cat_name + "</option>"); } }else{ for(var i=0,len=subcate.length; i<len; i++){ if(subcate[i].parent_id == cat_id){ $('#sub_cate_id').append("<option value='"+ subcate[i].sapval +"'>" + subcate[i].cat_name + "</option>"); } } } }); }); {/literal} listTable.recordCount = {$record_count}; listTable.query = 'list'; listTable.pageCount = 1; {foreach from = $filter item = item key = key} listTable.filter.{$key} = '{$item}'; {/foreach} function searchGoods() { listTable.filter['big_cate_id'] = document.forms['searchForm'].elements['big_cate_id'].value; listTable.filter['sub_cate_id'] = document.forms['searchForm'].elements['sub_cate_id'].value; listTable.filter['keyword'] = Utils.trim(document.forms['searchForm'].elements['keyword'].value); listTable.filter['src'] = '{$src}'; listTable.loadList(); } ![图片描述][1] </code>
Sehen Sie sich den Code an.
<code> <!-- 大系列 --> <td style="visibility: hidden;">{$lang.big_series}<select name="big_cate_id" id="big_cate_id"> <option value="">{$lang.please_select}</option> {foreach from=$big_series item=big}<option value="{$big.sapval}" rel="{$big.cat_id}">{$big.cat_name}</option>{/foreach} </select> </td> </tr> <!-- 小系列 --> <!-- <td>{$lang.sub_series}<select name="sub_cate_id" id="sub_cate_id" onchange="searchGoods();"> <option value="">{$lang.please_select}</option> {foreach from=$sub_series item=sub}<option value="{$sub.sapval}" class="s{$sub.parent_id}">{$sub.cat_name}</option>{/foreach} </select> </td> --> <!-- 商品号or商品名 --> <tr> <td align="center"> <input type="text" name="keyword" size="15" placeholder="产品名(号)" style="height:19px;line-height:19px;" /> <input type="submit" value="搜索产品" class="button" /> </td> </tr> <tr> <td>{$lang.sub_series}<select name="sub_cate_id" id="sub_cate_id" onchange="searchGoods();" size="20"> {foreach from=$sub_series item=sub}<li value="{$sub.sapval}" class="s{$sub.parent_id}">{$sub.cat_name}</li>{/foreach} </select> </td> </tr> $(document).ready(function(){ $('#big_cate_id').change(function(){ var sapval = $(this).val(); var cat_id = 0; $(this).find('option').each(function(){ if($(this).attr('value') == sapval){ cat_id = $(this).attr('rel'); } }); $('#sub_cate_id').empty(); $('#sub_cate_id').append('<option value="">{$lang.please_select}</option>'); if(sapval == ''){ for(var i=0,len=subcate.length; i<len; i++){ $('#sub_cate_id').append("<option value='"+ subcate[i].sapval +"'>" + subcate[i].cat_name + "</option>"); } }else{ for(var i=0,len=subcate.length; i<len; i++){ if(subcate[i].parent_id == cat_id){ $('#sub_cate_id').append("<option value='"+ subcate[i].sapval +"'>" + subcate[i].cat_name + "</option>"); } } } }); }); {/literal} listTable.recordCount = {$record_count}; listTable.query = 'list'; listTable.pageCount = 1; {foreach from = $filter item = item key = key} listTable.filter.{$key} = '{$item}'; {/foreach} function searchGoods() { listTable.filter['big_cate_id'] = document.forms['searchForm'].elements['big_cate_id'].value; listTable.filter['sub_cate_id'] = document.forms['searchForm'].elements['sub_cate_id'].value; listTable.filter['keyword'] = Utils.trim(document.forms['searchForm'].elements['keyword'].value); listTable.filter['src'] = '{$src}'; listTable.loadList(); } ![图片描述][1] </code>
Das Select-Tag hat das Attribut size