如果您手动设置,JQuery选择输入值不会自动更改

时间:2017-08-17 12:57:16

标签: jquery select text input range

我有选择并输入范围+输入文字。

选择中有两种选择:

  1. 您输入值的大小。
  2. 输入值的固定大小。
  3. 如果您选择固定尺寸,一切都可以,但是,如果您先手动设置尺寸,然后选择固定尺寸输入值不会改变。错误在哪里?

        $(document).ready(function () {     
            $("div.roword select").change( function() {
                var text = $(this).find("option:selected").text();
                if (text == "60x90") {
                    $("input#height, input#heightPlus").attr('value', '60');
                    $("input#width, input#widthPlus").attr('value', '90');
                    $("input#height, input#width").focus();
                    $("input#height, input#width").blur();
                 }
        });
    });
    

1 个答案:

答案 0 :(得分:2)

试试这个

$(document).ready(function () {     
    $("div.roword select").change( function() {
        var text = $(this).find("option:selected").text();
        if (text == "Size 60x90") {
            $("input#height, input#heightPlus").val(60);
            $("input#width, input#widthPlus").val(90);
            $("input#height, input#width").focus();
            $("input#height, input#width").blur();
        }
   });
});

jQuery(document).ready(function($) {
		count = 0;
	    var html2 = $("<input form='send' type='range' id='width' name='width" + count + "' min='40' max='300' value='40'/><input type='text' pattern='\d*' maxlength='3' id='widthPlus' name='widthPlus" + count + "' min='40' max='300' value='40'/>");
	    $(".form-col-3").html(html2);
		$(document).on('input', '#width', function(event) {
		    $(this).next().val($(this).val());
		});
		$(document).on('input', '#widthPlus', function(event) {
		    $(this).prev().val($(this).val());
		});
		$("div.roword select").change( function() {
	        var text = $(this).find("option:selected").text();
	        if (text == "Size 60x90") {
	            $("input#height, input#heightPlus").val(60);
	            $("input#width, input#widthPlus").val(90);
	            $("input#height, input#width").focus();
	            $("input#height, input#width").blur();
	        }else{
	            $("input#height, input#heightPlus").val(40);
	            $("input#width, input#widthPlus").val(40);                
            }
	   });
    });
<div id="form" >
       <div class="roword">
           <div class="col-md-3 col-sm-6 col-xs-12 form-col-1">
               <select  form="send" name="type[]">
                    <option value="">Choose type</option>
                    <option class="optionBold" value="1.1">Your own size</option>
                   <option value="1.1">Size 60x90</option>
                  </select>
           </div>
           <div class="col-md-3 col-sm-6 col-xs-12 form-col-3">
           </div>
           <div class="col-md-2 col-sm-5 col-xs-10 form-col-4">
               <input class="myPrice" form="send" type="text" name="result[]" readonly>
           </div>
       </div>
   </div>
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>