Question

我有一个来自古兰经的Surah名称的下拉列表，我如何将下拉值传递给函数

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

在上面的网址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>

Answer 1

更改内容时更改内容：

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

执行获取数据的功能：

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

Answer 2

您必须创建一个更改函数并将所有提取代码放入其中。

JSFiddle

获取选定值：

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

Answer 3

$.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

的任何内容

Answer 4

您需要在url中连接dropdwon的值。试试这个

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

如何将值从下拉列表传递给getJSON url

4 个答案: