如何从下拉菜单中传递价值的getJSON网址

-4

我有来自古兰经古兰经的名字，我怎么可以通过下拉列表中的数值下拉运作如何从下拉菜单中传递价值的getJSON网址

$.getJSON("http://api.globalquran.com/surah/2/quran-simple?key=api_key&jsoncallback=?", { 
    ... 
})

在上面的URL 2应该改变基于一个价值的下拉

jsBin

$.ajaxSetup({ 
 
    cache: true, 
 
    jsonpCallback: 'quranData' 
 
}); // define ajax setup 
 
$.getJSON("http://api.globalquran.com/surah/2/quran-simple?key=api_key&jsoncallback=?", { 
 
    format: "jsonp" 
 
}, function(data) { 
 
    $.each(data.quran, function(i, by) { 
 
    $.each(by, function(verseNo, line) { 
 
     // $("<p>").html('('+ line.surah+':'+line.ayah+') '+line.verse).appendTo("#demo-1"); 
 
     $("<span>").html(line.verse + '&nbsp;(' + line.surah + ':' + line.ayah + ') &nbsp; ').appendTo("#demo-1"); 
 
    }); 
 
    }); 
 
});

#demo-1 { 
 
    color: black; 
 
    font-size: 28px; 
 
    direction: rtl; 
 
    max-width: 50%; 
 
    padding: 30px; 
 
    margin: 0 auto; 
 
    text-align: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="customSurah" id="surah" name="surah"> 
 
    <option value="1">Al-Faatiha</option> 
 
    <option value="2">Al-Baqara</option> 
 
    <option value="3">Aal-i-Imraan</option> 
 
    <option value="4">An-Nisaa</option> 
 
    <option value="5">Al-Maaida</option> 
 
    <option value="6">Al-An'aam</option> 
 
    <option value="7">Al-A'raaf</option> 
 
    <option value="8">Al-Anfaal</option> 
 
    <option value="9">At-Tawba</option> 
 
    <option value="10">Yunus</option> 
 
    <option value="11">Hud</option> 
 
    <option value="12">Yusuf</option> 
 
    <option value="13">Ar-Ra'd</option> 
 
    <option value="14">Ibrahim</option> 
 
    <option value="15">Al-Hijr</option> 
 
    <option value="16">An-Nahl</option> 
 
    <option value="17">Al-Israa</option> 
 
    <option value="18">Al-Kahf</option> 
 
    <option value="19">Maryam</option> 
 
    <option value="20">Taa-Haa</option> 
 
    <option value="21">Al-Anbiyaa</option> 
 
    <option value="22">Al-Hajj</option> 
 
    <option value="23">Al-Muminoon</option> 
 
    <option value="24">An-Noor</option> 
 
    <option value="25">Al-Furqaan</option> 
 
    <option value="26">Ash-Shu'araa</option> 
 
    <option value="27">An-Naml</option> 
 
    <option value="28">Al-Qasas</option> 
 
    <option value="29">Al-Ankaboot</option> 
 
    <option value="30">Ar-Room</option> 
 
    <option value="31">Luqman</option> 
 
    <option value="32">As-Sajda</option> 
 
    <option value="33">Al-Ahzaab</option> 
 
    <option value="34">Saba</option> 
 
    <option value="35">Faatir</option> 
 
    <option value="36">Yaseen</option> 
 
    <option value="37">As-Saaffaat</option> 
 
    <option value="38">Saad</option> 
 
    <option value="39">Az-Zumar</option> 
 
    <option value="40">Al-Ghaafir</option> 
 
    <option value="41">Fussilat</option> 
 
    <option value="42">Ash-Shura</option> 
 
    <option value="43">Az-Zukhruf</option> 
 
    <option value="44">Ad-Dukhaan</option> 
 
    <option value="45">Al-Jaathiya</option> 
 
    <option value="46">Al-Ahqaf</option> 
 
    <option value="47">Muhammad</option> 
 
    <option value="48">Al-Fath</option> 
 
    <option value="49">Al-Hujuraat</option> 
 
    <option value="50">Qaaf</option> 
 
    <option value="51">Adh-Dhaariyat</option> 
 
    <option value="52">At-Tur</option> 
 
    <option value="53">An-Najm</option> 
 
    <option value="54">Al-Qamar</option> 
 
    <option value="55">Ar-Rahmaan</option> 
 
    <option value="56">Al-Waaqia</option> 
 
    <option value="57">Al-Hadid</option> 
 
    <option value="58">Al-Mujaadila</option> 
 
    <option value="59">Al-Hashr</option> 
 
    <option value="60">Al-Mumtahana</option> 
 
    <option value="61">As-Saff</option> 
 
    <option value="62">Al-Jumu'a</option> 
 
    <option value="63">Al-Munaafiqoon</option> 
 
    <option value="64">At-Taghaabun</option> 
 
    <option value="65">At-Talaaq</option> 
 
    <option value="66">At-Tahrim</option> 
 
    <option value="67">Al-Mulk</option> 
 
    <option value="68">Al-Qalam</option> 
 
    <option value="69">Al-Haaqqa</option> 
 
    <option value="70">Al-Ma'aarij</option> 
 
    <option value="71">Nooh</option> 
 
    <option value="72">Al-Jinn</option> 
 
    <option value="73">Al-Muzzammil</option> 
 
    <option value="74">Al-Muddaththir</option> 
 
    <option value="75">Al-Qiyaama</option> 
 
    <option value="76">Al-Insaan</option> 
 
    <option value="77">Al-Mursalaat</option> 
 
    <option value="78">An-Naba</option> 
 
    <option value="79">An-Naazi'aat</option> 
 
    <option value="80">Abasa</option> 
 
    <option value="81">At-Takwir</option> 
 
    <option value="82">Al-Infitaar</option> 
 
    <option value="83">Al-Mutaffifin</option> 
 
    <option value="84">Al-Inshiqaaq</option> 
 
    <option value="85">Al-Burooj</option> 
 
    <option value="86">At-Taariq</option> 
 
    <option value="87">Al-A'laa</option> 
 
    <option value="88">Al-Ghaashiya</option> 
 
    <option value="89">Al-Fajr</option> 
 
    <option value="90">Al-Balad</option> 
 
    <option value="91">Ash-Shams</option> 
 
    <option value="92">Al-Lail</option> 
 
    <option value="93">Ad-Dhuhaa</option> 
 
    <option value="94">Ash-Sharh</option> 
 
    <option value="95">At-Tin</option> 
 
    <option value="96">Al-Alaq</option> 
 
    <option value="97">Al-Qadr</option> 
 
    <option value="98">Al-Bayyina</option> 
 
    <option value="99">Az-Zalzala</option> 
 
    <option value="100">Al-Aadiyaat</option> 
 
    <option value="101">Al-Qaari'a</option> 
 
    <option value="102">At-Takaathur</option> 
 
    <option value="103">Al-Asr</option> 
 
    <option value="104">Al-Humaza</option> 
 
    <option value="105">Al-Fil</option> 
 
    <option value="106">Quraish</option> 
 
    <option value="107">Al-Maa'un</option> 
 
    <option value="108">Al-Kawthar</option> 
 
    <option value="109">Al-Kaafiroon</option> 
 
    <option value="110">An-Nasr</option> 
 
    <option value="111">Al-Masad</option> 
 
    <option value="112">Al-Ikhlaas</option> 
 
    <option value="113">Al-Falaq</option> 
 
    <option value="114">An-Naas</option> 
 
</select> 
 

 
<div id="demo-1"> 
 
</div>

来源

2016-06-09 Learning

如果你想下拉，其中参数的值？ – Mairaj

在这个URL中2应该根据下拉选择'http：//api.globalquran.com/surah/2/quran-simple？key = api_key＆jsoncallback =？' – Learning

改变你试过了答案。 – Mairaj

你将不得不创建一个更改函数并将所有获取代码放入其中。

JSFiddle

获取选定值：

$("#surah").on("change", function() { 
     $.getJSON("https://api.globalquran.com/surah/" + $(this).val() + "/quran-simple?key=api_key&jsoncallback=?", {

来源

2016-06-09 10:01:08 Rajesh

$.getJSON("http://api.globalquran.com/" + 
    $("#surah option:selected").text() + 
    "/2/quran-simple?key=api_key&jsoncallback=?", { 
    format : "jsonp" 
},

或任何从Get selected text from a drop-down list (select box) using jQuery

来源

2016-06-09 09:50:18 neaumusic

您需要连接的URL dropdwon的价值。试试这个

"http://api.globalquran.com/surah/"+$("#surah").val()+"/quran-simple"

来源

2016-06-09 09:51:27 Mairaj

更改的内容，当你改变它：

<select class="customSurah" id="surah" name="surah" onchange="DataByParam($('#surah option:selected').text())">

做一个函数FO获取数据：

function DataByParam(id){ 
     $.ajaxSetup({ cache: true, jsonpCallback: 'quranData' }); // define ajax setup 
    $.getJSON("http://api.globalquran.com/" + id + "/2/quran-simple?key=api_key&jsoncallback=?", { 
     format : "jsonp" 
    }, function(data) 
    {  
     $.each(data.quran, function(i, by) 
     { 
     $.each(by, function (verseNo, line) { 
       // $("<p>").html('('+ line.surah+':'+line.ayah+') '+line.verse).appendTo("#demo-1"); 
       $("<span>").html(line.verse + '&nbsp;(' +line.surah + ':' + line.ayah + ') &nbsp; ').appendTo("#demo-1"); 
     }); 
     }); 
    }); 
     }

引擎收录： http://jsbin.com/fogoduzore/1/edit?html,output

来源

2016-06-09 09:59:47 mene

如何从下拉菜单中传递价值的getJSON网址

回答

相关问题