匹配下拉值和数组

时间:2014-10-20 09:07:32

标签: javascript html arrays

我需要匹配下拉列表值和数组。然后我遇到了一些问题。

var authorArray =["a","b","c"];

并且作者的姓名必须与图书的名称相匹配

<form name="myForm" action="">
    Author's name: <input type="text"  name="authorName"><br>

这是一个下拉列表

<select name="selectBook" id="bookName">
    <option value="" selected="selected">-</option>
    <option id="bookA"value="q">q</option>
    <option id="bookB"value="r">r</option>
    <option id="bookC"value="s">s</option>
</select>   

如果作者a与图书q匹配,则输出图书信息x

如果作者b与图书r匹配,则输出图书信息y

如果作者c与图书q匹配,则输出图书信息z

输出必须在textarea框中

<input type="button" value="RETRIEVE"> 
<textarea name="infoBox"  cols="120"></textarea>

怎么做? 谢谢你的帮助

2 个答案:

答案 0 :(得分:0)

为了将2-Dim键映射到基本不同的值,您可以设置2-dim&#39;数组&#39;像:

var Info_for_Author_and_Book = {
 'author_a' : {
   'book_q' : "Info for a, q",
   ...
   'book_s' : "Info for a, s"
  },
  ...
 'author_c' : {
   'book_q' : "Info for c, q",
   ...
   'book_s' : "Info for c, s"
  }
 }

您可以通过以下方式访问信息数据:

var selected_info = (Info_for_Author_and_Book[author] && Info_for_Author_and_Book[author][book]) || "Not available";

答案 1 :(得分:0)

所以你可以用对象做这样的事情:

&#13;
&#13;
var authors = {
               a: {
                   books: {
			      q:"x"
		          }
               },
               b: {
                   books: {
			      r:"y"
			  }
               },
               c: {
                   books: {
			     q:"z"
	                 }
               }
}

function findBookByName(name){
  for(a in authors){
     for(b in authors[a]){
        if(authors[a][b].hasOwnProperty(name)) return authors[a][b][name];      
     }
  }
  
  return "NOT FOUND"
}

window.addEventListener('load', function(){
   var selectBook = document.getElementById("bookName"),
       buttonRetrieve = document.getElementById("btnRetrieve"),
       infoBox = document.getElementsByName("infoBox");
   
   buttonRetrieve.addEventListener('click', function(){
     var result = findBookByName(selectBook.value);
     infoBox[0].value = result;
   
   })


})
&#13;
<select name="selectBook" id="bookName">
    <option value="" selected="selected">-</option>
    <option id="bookA"value="q">q</option>
    <option id="bookB"value="r">r</option>
    <option id="bookC"value="s">s</option>
</select>

<input type="button" id="btnRetrieve" value="RETRIEVE"> 
<textarea name="infoBox"  cols="120"></textarea>
&#13;
&#13;
&#13;