根据下拉选择使用.load填充div [英] Populate div with .load based on drop down selection

问题描述

好吧，这感觉就像一个基本的东西，但即时通讯努力使它的工作 -
我想要完成的是一个下拉列表与约45县，当一个被选中，一个空的div body将从另一个html页面加载一个div（我将在其中放置45个div的相应位置信息）。

使用ajax加载样式事件

 < script> 
 $（document）.ready（function（）{
 $（＃county-result）。load（county_list.html＃county1）; 
}）; 
< / script> 
  

但为了减少脚本的重量，我希望下拉列表的值可以与其匹配的县区分编号填充加载函数的一部分（而不是写入45个单独的文件）

关于如何做到这一点的想法？

解决方案

我创建了 plunkr 给你！我希望它有帮助

我基本上在这里做的是，我将一个变更事件监听器添加到select（下拉列表）中我确保我的div国家的html文件与我的主文件中的选项值相同（在那里你将有下拉菜单）

所以如果你想了解关于德国的信息，以确保一个国家的选项和div看起来有点像这样

< option value =germany> germany< / option>

 < div id =germany> 
< h1>柏林< / h1> 
< / div> 
  

Alright this feels like a basic thing, but im struggling to make it work - What I'm trying to accomplish is a drop down list with about 45 county's, when one is selected, an empty div in the body will load with a div from another html page (where I'm going to house the 45 divs of corresponding location information).

Intending on using an ajax load style event

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

But to make the script less heavy I would want the dropdown value to be its matching county div id to populate that part of the load function (rather then writing 45 individual ones)

Ideas on how I can do this?

解决方案

I created a plunkr for you! I hope it helps

What I'm basically doing here is, I'm adding a change event listener to a select (dropdown) And I make sure my divs in the countries html file have the same id's as my option values in my main file (The one where you will have the dropdown menu)

So if you want information about germany you have to make sure a countries option and div will look a bit like this

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

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

这篇关于根据下拉选择使用.load填充div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！