jq隱藏文本 數據展示

1.數據從後臺傳參過來 數據要整合完好

<p class="title_sign">城市</p>
                <div class="selects defult_color">  
              		<div class="select_city">
                          <select class="triangle" onchange='btnChange(this[selectedIndex]);' id="selectchange" >
                              <{if count($activeCity)< 1}>
                              <option value="">暫無活動城市</option>
                              <{else}>
                              <option value="">請選擇城市</option>  
                              <{/if}>
                              <{foreach from=$activeCity key=char item=val}>
                                  <{foreach from=$val key=shkey item=item}>
                              <option attr-time="<{$item.date}>" attr-address="<{$item.address}>" attr-title="<{$item.title1}>"  value="<{$item.city_id}>"><{$char}> <{$item.city_name}></option>
                              <{/foreach}>
                              <{/foreach}>
                                    
                          </select>
                       </div>
                </div>
                <!--點擊顯示-->
                <p class="title_sign" id="xz_cc" style="display:none;">選擇場次</p>
                <div id="selected_city" class="selected_city" style="display:none;">
                	<div class="city">
                		
                	</div>
                	<div class="time_adress">
                		<p></p>
                		<p></p>
                	</div>
                </div>

jq區塊

 var comm = {};
//彈出團購詳情信息
function btnChange(optionEle){
        comm.date =     $(optionEle).attr('attr-time'),
        comm.address = $(optionEle).attr('attr-address'),
        comm.title = $(optionEle).attr('attr-title');
    $('#selected_city').show();
    $('#xz_cc').show();
    
    $('#selected_city .city').text(comm.title);

    $('#selected_city .time_adress p:nth-child(1)').text('地點:'+comm.address);
    $('#selected_city .time_adress p:nth-child(2)').text('時間:'+comm.date);
   
}

上邊代碼是下來菜單 根據onchange 事件 獲取對象將數據傳輸給下邊 function 方法 拿到對應參數進行處理(事件 地址 名稱)
同時對方法賦值 新的組合中 並展開(show) selected_city xz_cc 場次標題 以及數據

拿到的數據 一一對應給空值的P標籤中 p:nth-child(1) (註釋:代表p標籤的第一個 同理 2 就是第二個p標籤 jq知識)

$(’#selectchange’).children(“option:selected”).val(); 被選中的id

下拉框獲取被選中的值方法
$(’#testSelect option:selected’).text();//選中的文本
$(’#testSelect option:selected’) .val();//選中的值

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章