使用基於下拉選擇的.load填充div

Question

好吧，這感覺就像一個基本的東西，但即時通訊努力使其工作 - 我想完成的是一個下拉列表與約45個縣，當一個是選中，身體中的空白div將加載另一個html頁面（我將要放置相應位置信息的45格）的div。

意欲在使用AJAX負荷風格事件

<script> 
$(document).ready(function(){ 
     $("#county-result").load("county_list.html #county1"); 
}); 
</script> 

但是，爲了使劇本少重我想下拉值是其匹配縣的div id來填充加載功能的一部分（而不是寫45個人）

想法我怎麼能做到這一點？

Answer 1

我爲您創建了plunkr！我希望它有幫助

我在這裏基本上做的是，我添加一個更改事件監聽器到一個選擇（下拉）我確保我的div在國家html文件具有相同的id作爲我的選項值在我的主文件（其中，你將有下拉菜單）

所以，如果你想了解德國的信息，你必須確保一個國家的選擇和DIV看起來有點像這樣

<option value="germany">germany</option>

<div id="germany"> 
    <h1>Berlin</h1> 
</div> 

Answer 2

這個問題我有點廣泛。但是，如果我需要處理與45個縣相關的信息，並需要顯示從下拉菜單中選擇的縣的信息，我會使用JSON作爲我的數據源，並使用模板填充div並迭代JSON對象，然後尋找選定的ID。

下面是如何工作的例子。請注意，我實際上是基於數據集本身動態地構建選擇框選項，並且該設置允許您在需要時輕鬆更新數據。

注意你如何得到JSON取決於你。我已經硬編碼它在這個例子中，但你可以通過Ajax請求或使用.get()，​​等得到它..

var myCountyInfo = { 
 
    counties: [{ 
 
    name: 'County 1', 
 
    id:123, 
 
    locationInfo: { 
 
     lat: 453245, 
 
     lng: 45545, 
 
     avgTemp: '75f', 
 
     population: '5 B.' 
 
    } 
 
    }, { 
 
    name: 'County 2', 
 
    id:456, 
 
    locationInfo: { 
 
     lat: 11221, 
 
     lng: 542222, 
 
     avgTemp: '59f', 
 
     population: '2 B.' 
 
    } 
 
    }, { 
 
    name: 'County 3', 
 
    id:789, 
 
    locationInfo: { 
 
     lat: 88555, 
 
     lng: 54757, 
 
     avgTemp: '58f', 
 
     population: '1 B.' 
 
    } 
 
    }] 
 
} 
 

 
function populateSelectBoxes($select, data) { 
 
    var counties = []; 
 
    $.each(data, function() { 
 
    counties.push('<option value="'+this.id+'">' + this.name + '</option>'); 
 
    }); 
 
    $select.append(counties.join('')); 
 
} 
 

 
function populateTableRow($tableBody, data, selectedCountyId) { 
 
    var county; 
 
    $.each(data, function() { 
 
    if (this.id == selectedCountyId) { 
 
     county = this; 
 
     return false; 
 
    } 
 
    }); 
 
    $tableBody.html('<tr>'+ 
 
        '<td>' + county.name + '</td>'+ 
 
        '<td>' + county.locationInfo.lat +'</td>'+ 
 
        '<td>' + county.locationInfo.lng + '</td>'+ 
 
        '<td>' + county.locationInfo.avgTemp + '</td>'+ 
 
        '<td>' + county.locationInfo.population + '</td>'+ 
 
        '</tr>'); 
 

 

 
} 
 
populateSelectBoxes($('#my-select'), myCountyInfo.counties); 
 

 
$('#my-select').change(function() { 
 
    var $this = $(this); 
 
    var selection = $this.val(); 
 
    populateTableRow($('#my-table tbody'), myCountyInfo.counties, selection); 
 
});

td,th{ 
 
    padding:5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="" id="my-select"></select> 
 

 
<table id="my-table" border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th>County</th> 
 
     <th>Lat.</th> 
 
     <th>Lng.</th> 
 
     <th>Avg Temp</th> 
 
     <th>Population</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>