我想根据下拉列表的值更改输入字段的值。但两者都应该有不同的价值观

Question

我想根据下拉列表的值更改输入字段的值。但两者都应该有不同的价值观。

我希望有2个不同的值，例如下拉值应为“Chenai - Pondicherry”，输入值必须为2000

我试过这样的事情，但它不起作用。谁能帮助我？

$(document).ready(function() {
$("#price").live("change", function() {
	if ($("#options").val() == "Chenai - Pondicherry") { 
		$("#price").val("200");	  
 	} 
 	else if ($("#options").val() == "Chenai - Thirupathi"){      
  	  $("#price").val("201");	
 	}else ($("#options").val() == "Chenai - Kerala"){ 
      $("#price").val("202");	
 	}
  });

	<input id="price" type="text" name="cuscharge" placeholder="price" readonly>

			<select id="options" name="tname"> 
				<option value="">Select Trip</option> 
				<option value="Chenai - Pondicherry">Chenai - Pondicherry</option> 
				<option value="Chenai - Thirupathi">Chenai - Thirupathi</option> 
				<option value="Chenai - Kerala">Chenai - Kerala</option>
			</select>
		

Answer 1

我修正了一些错误并且工作正常

$(document).ready(function() {
    $("#options").change(function() {
        if ($("#options").val() == "Chenai - Pondicherry") { 
            $("#price").val("200");   
        } 
        else if ($("#options").val() == "Chenai - Thirupathi"){      
          $("#price").val("201");   
        }
        else if ($("#options").val() == "Chenai - Kerala"){ 
          $("#price").val("202");   
        }
        else
        {
          $("#price").val("Select Price");
        }
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<input id="price" type="text" name="cuscharge" placeholder="price" readonly value="">

<select id="options" name="tname"> 
    <option value="">Select Trip</option> 
    <option value="Chenai - Pondicherry">Chenai - Pondicherry</option> 
    <option value="Chenai - Thirupathi">Chenai - Thirupathi</option> 
    <option value="Chenai - Kerala">Chenai - Kerala</option>
</select>

Answer 2

在html中设置值，然后将事件分配更改为文本框

 $(document).ready(function() {
    $("#options").change(function() {
    	$('#price').val($(this).val());
      });
    });

   <script src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  
<input id="price" type="text" name="cuscharge" placeholder="price" readonly>
    
    <select id="options" name="tname"> 
     <option value="">Select Trip</option> 
     <option value="2000">Chenai - Pondicherry</option> 
     <option value="1000">Chenai - Thirupathi</option> 
     <option value="3000">Chenai - Kerala</option>
    </select>

Answer 3

$(document).ready(function(){
  $("#options").on("change",function() {
    if ($("#options").val() == "Chenai - Pondicherry"){ 
		$("#price").val("200");
        } 
    else if($("#options").val() == "Chenai - Thirupathi"){      
  	   $("#price").val("201");	
 	   }
    else if($("#options").val() == "Chenai - Kerala"){ 
        $("#price").val("202");	
 	   }
    else{
       $("#price").val("");	
        }
  });
 });

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input id="price" type="text" name="cuscharge" placeholder="price" readonly>

			  <select id="options" name="tname"> 
				<option value="">Select Trip</option> 
				<option value="Chenai - Pondicherry">Chenai - Pondicherry</option> 
				<option value="Chenai - Thirupathi">Chenai - Thirupathi</option> 
				<option value="Chenai - Kerala">Chenai - Kerala</option>
			</select>

在jquery中添加jquery库中的更改方法，检查是否还有循环，它也是在其他部分。

Answer 4

＆＃13;

＆＃13;

 $(document).ready(function() {
$("#options").on("change", function() {
	var opt_val = $("#options").val();
	if (opt_val == "Chenai - Pondicherry") { 
		$("#price").val("200");	  
 	} 
 	else if (opt_val == "Chenai - Thirupathi"){      
  	  $("#price").val("201");	
 	}else if(opt_val == "Chenai - Kerala"){ 
      $("#price").val("202");	
 	}
 });
  });

＆＃13;

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <input id="price" type="text" name="cuscharge" placeholder="price" readonly>
<select id="options" name="tname"> 
<option value="">Select Trip</option> 
<option value="Chenai - Pondicherry">Chenai - Pondicherry</option> 
<option value="Chenai - Thirupathi">Chenai - Thirupathi</option> 
<option value="Chenai - Kerala">Chenai - Kerala</option>
</select>

＆＃13;

＆＃13;

＆＃13;