使用jQuery使用单个选择菜单填充2个文本框

我目前正在制作一个页面，让用户选择一项服务，然后服务信息将显示在下面的文本区域。我已经完成了这部分。我想要的是，当用户选择一项服务时，说明文本框将被填充，价格也是如此

这是前端：

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

---

注意：不要介意这些值，我还在测试它。

如果我是你，我会使用“选择为”键中的值创建一个包含所有信息的对象：

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);
  ...
});

---

通过这种方式，您可以将所有内容保存在一个位置（例如，一个单独的文件），并删除所有难以读取和维护的数据属性。

请共享您的代码粘贴您尝试过的代码。您的确切问题是什么？您必须从DB获得价格？然后使用ajax调用，获取详细信息并将其填充到文本框中。@charlietfl“我想要的是，当用户选择服务时，说明文本框将被填充，因此价格也会被填充。”我将尝试这样做。我是jQuery新手。谢谢酷。如果您有任何问题，请告诉我，也许我可以帮助您制作一个工作示例。

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