Question

我有一个文本字段和一个下拉列表。每当我更改DropDown列表时，相应的文本框都会发生变化。

我的代码

$('body').on('change', "#fieldType", function(){
     var  changeType  = $(this).val();
     console.log(changeType);
     var rohit = $('.createDynamicBox.highLighted').find('input').attr("type=changeType");
     console.log(rohit);
  });

.formGroup{border:solid 1px red; margin-top:20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="createDynamicBox highLighted" data="singleLineTextBtn">
   <label for="singeText3U17">Single line text</label>
   <input type="text" value="" id="singeText3U17">
</div>
<div class="formGroup">
   <label for="fieldType">Field Type</label>
   <select id="fieldType">
	 <option value="text">Text</option>
         <option value="number">Number</option>
	 <option value="password">Password</option>
  </select>
</div>

Answer 1

使用.prop("type",changeType)代替attr()来更改输入的类型

＆＃13;

$('body').on('change', "#fieldType", function(){
     var  changeType  = $(this).val();
     console.log(changeType);
     var rohit = $('.createDynamicBox.highLighted').find('input').prop("type",changeType);
     console.log(rohit);
  });

＆＃13;

.formGroup{border:solid 1px red; margin-top:20px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="createDynamicBox highLighted" data="singleLineTextBtn">

<label for="singeText3U17">Single line text</label>
<input type="text" value="" id="singeText3U17">

</div>
    
    
    
    <div class="formGroup">
														<label for="fieldType">Field Type</label>
														<select id="fieldType">
															<option value="text">Text</option>
															<option value="number">Number</option>
															<option value="password">Password</option>
														</select>
													</div>

＆＃13;

Answer 2

您可以使用$('#singeText3U17').get(0).type = changeType;

尝试这个

$('body').on('change', "#fieldType", function(){
     var  changeType  = $(this).val();
     console.log(changeType);
     var rohit = $('.createDynamicBox.highLighted').find('input').attr("type=changeType");
     console.log(rohit);
   
   $('#singeText3U17').get(0).type = changeType;
    
  });

.formGroup{border:solid 1px red; margin-top:20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="createDynamicBox highLighted" data="singleLineTextBtn">

<label for="singeText3U17">Single line text</label>
<input type="text" value="" id="singeText3U17">

</div>
    
    
    
    <div class="formGroup">
														<label for="fieldType">Field Type</label>
														<select id="fieldType">
															<option value="text">Text</option>
															<option value="number">Number</option>
															<option value="password">Password</option>
														</select>
													</div>

Answer 3

您无法使用attr方法更改类型属性，因为IE不支持此操作使用prop代替。

var rohit = $('.createDynamicBox.highLighted').find('input').prop("type", changeType);

如何使用jquery中的下拉菜单更改输入类型？

3 个答案: