jqueryのselectボックスを使ってdivにページコンテンツをロードするには？

選択オプションが選択されている場合、Ajax経由でdivにページコンテンツをロードしようとしています。jqueryのselectボックスを使ってdivにページコンテンツをロードするには？

これは私のコードですが、動作しません。

$('mySelect').on('change',function(){ 
 
function loadPage(url){ 
 
    $("#page").load(url); 
 
} 
 
});

<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
    <div class="container"> 
 
    <select class="custom-select" id="mySelect"> 
 
    <option value="1" onchange="loadPage('One.html')">One</option> 
 
    <option value="2" onchange="loadPage('Two.html')">Two</option> 
 
    </select> 
 
</div> 
 
    
 
    <div id="page"></div> 
 

 

 
</body> 
 
</html>

私は値がOne.htmlとTwo.htmlであり、その下に、私はdiv要素を持っているとOne.htmlとTwo.htmlからコンテンツをしたい2つのオプションで選択ボックスを持っています選択ボックスが変更されたときにdivにロードする... Ajax経由で何か提案がありますか？であるべき

$('mySelect').on('change',function(){

：

$('#mySelect').on('change',function(){ 
___^

インラインイベントonchange()を避けるようにしてくださいとurlのparamを格納するのにdata-*を使用しますが、ID記号#を逃している

おかげ

出典

2017-11-26 Nguyễn

ページをAJAX経由で）？ – Nisarg

変更イベント内のloadPage関数に渡します。

これが役に立ちます。

$(function() { 
 
    loadPage("One.html"); 
 

 
    $('#mySelect').on('change', function() { 
 
    loadPage($(this).find(':selected').data('url')); 
 
    //OR 
 
    // $("#page").load($(this).find(':selected').data('url')); 
 
    }); 
 
}); 
 

 
function loadPage(url) { 
 
    $("#page").load(url); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <select class="custom-select" id="mySelect"> 
 
    <option value="1" data-url="One.html">One</option> 
 
    <option value="2" data-url="Two.html">Two</option> 
 
    </select> 
 
</div> 
 

 
<div id="page"></div>

出典

2017-11-26 08:53:00

あなたのコードをありがとう。それでも動作しません。 –

彼のコードが動作しています。ここをクリックhttps://jsfiddle.net/qu8r8nLj/2/ @Nguyễn –

@Irfan TahirKheliありがとうございます！デフォルトのOne.htmlをロードする方法は？ –

それは非常に簡単です：

のiframeを作成し、取得とは対照的に、（必要性の通りの `src`属性を設定しないのはなぜ

$("#SelectOne").change(function() { 
 
    $("#someDiv").load($(this).val()); 
 
});

<select id="SelectOne"> 
 
    <option>One.html</option> 
 
    <option>Two.html</option> 
 
</select> 
 

 
<div id="someDiv"></div>

出典

2017-11-26 09:00:29

あなたのコードをありがとう。それでも動作しません –

@Nguyễn私はそれをテストします、https://jsfiddle.net/stcbqufm/1/をチェックしてください –

jqueryのselectボックスを使ってdivにページコンテンツをロードするには？

答えて

関連する問題