使用jQuery使用單個選擇菜單填充2個文本框

Question

我正在製作一個讓用戶選擇服務的頁面，然後服務信息將顯示在下面的textarea上。我已經完成了這部分。我想要的是當用戶選擇一個服務時，描述文本框將被填充，並且價格也是如此。

這是前端：

<div class="container"> 
     <div class="col-md-6"> 
     <label for="menu" class="control-label">Service</label> 
     <select name="criteria_title" id="chosen_a" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done form-control" autofocus> 
      <option value="" hidden disabled selected></option> 
      <option value="1" data-id="Newly purchased computer? We will do the setup for you. We will configure and install your computer's software and troubleshoot your hardware. Clean up of utility shortcuts is also a part of our service. We will remove inappropriate software and application that may cause conflict to your computer. Demonstration of basic functionality will also be provided. Our trained experts will do all the complex work so you can fully enjoy your new computer.">Computer Setup</option> 
      <option value="2" data-id="As computers improve so does the limits of what you can do with them. New software makes use of these extra abilities. We will help you on finding a software that fits to your computer. We will verify your computer's compatibility, install software title and software updates if necessary. We will create a utility shortcut for you and examine if the software functions properly with your computer. Installation of software will fix the current bugs and will stop the computer from experiencing faults or crashing.">Software Install and Setup</option> 
      <option value="3" data-id="Need assistance on how to connect your peripherals and make it work with your computer? We will setup and configure necessary software and test the functionality of the devices if it is compatible wih your computer. Our communicative or outgoing or responsive tech specialist are willing to respond to your questions and concerns about your computer peripherals' functions and features.">Setup of Peripheral Devices</option> 
      <option value="4" data-id="No matter how high speed your computers may seem when it is new, it is expected to slow down over time. After you install a lot of programs and download different kinds of item from the internet, little by little your computer slows down without your awareness. There is a way to solve this problem without spending a big money. Regular tune up on your computer will eliminate the crashing, freezing and and impace the overall health of your computer.">Computer Tune Up Service</option> 
      <option value="5" data-id="Your sensitive information may be at risk by having malicious software or viruses invading your computer and privacy. We can provide an anti-virus solution to help protect your computer, personal data and privacy. Our techenical specialist uses advanced techniques in order to provide technical solutions to a wide range of difficult problems. Virus & Spyware Removal may improve the performance of your computer and ensures your computer remains virus-free.">Virus and Spyware Removal</option> 
      <option value="5" data-id="The loss of your personal files or business data can be disastrous. Secure your files with our Data backup service. We will install a back up to your computer and manage its default data feature. With just a few mouse clicks, specific lost or corrupted files can be restored allowing you to get back to business quickly and easily.">Data Backup/Transfer</option> 
      <option value="5" data-id="Wireless networking is an essential productivity tool for today's mobile workforce. If your desire is to have a wireless network at your home, we will help you in setting it up. We will configure your computer's network setting for 1 router, setup internet service provider and connect the router to the modem. Our professional agents will assist you in securing your network so no one else can access your network without your permission. Wireless network will enable devices to connect to the Internet without needing to plug in a cable.">Wireless Networking 
      </option> 
     </div> </select> 




     <div class="control-group formSep template"> 
     <div class="col-md-12"> 
      <label for="input01" class="control-label top">Service Description:</label> 
      <div class="input-group"> 
      <span class="input-group-addon"><i class="fa fa-file-text-o"></i></span><textarea rows="8" id="title" name="criteria_rate" size="30" type="text" class="criteria_rate span2 form-control text-justify" value="" readonly></textarea> 
      </div> 

      <label for="input01" class="control-label top">Quantity</label> 
      <div class="input-group"> 
      <span class="input-group-addon"><i class="fa fa-shopping-cart"></i></span><input type="text" rows="4" size="30" type="text" class="form-control text-justify" value=""> 
      </div> 

      <label for="input01" class="control-label top">Price</label> 
      <div class="input-group"> 
      <span class="input-group-addon"><i class="fa fa-tag"></i></span><input type="text" class="form-control text-justify" value="" /> 
      </div> 

      <label for="input01" class="control-label top">Comment</label> 
      <div class="input-group"> 
      <span class="input-group-addon"><i class="fa fa-comments"></i></span><textarea rows="7" class="form-control text-justify" value=""></textarea> 
      </div> 
     </div> 
     </div> 
    </div> 

功能：

$(document).ready(function(){ 
    $('#chosen_a').change(function(){ 
    var criteria_id = $(':selected',this).data('id'); 
    $('.criteria_rate').val(criteria_id); 
    }); 
    }); 

P.S：不介意的價值觀，我還在測試它。

Answer 1

如果我是你，我會創建一個對象與其中的所有信息，採用從選擇的值作爲鍵：

var values = { 
    "1": { 
    "price": "100", 
    "description": "Important" 
    }, 
    "2": { ... } 
} 

然後，勾入更改事件和使用的價值所選擇的選項來查找相關細節：

$("select").on("change", function(){ 
    var key = $("#myselect option:selected").val(); 
    var details = values[key]; 
    $("#description").val(details.description); 
    $("#price").val(details.price); 
    ... 
}); 

這樣你可以保持在一個地方的一切（一個單獨的文件，例如），並刪除所有的那些難以閱讀和難以維持數據屬性。