Question

我正在尝试创建一个搜索栏，根据选择的选项（单选按钮）动态更改搜索字段的数量。该代码适用于jsfiddle：https://jsfiddle.net/ultraj/cu0m860q/。我不确定为什么下面的代码在本地保存不起作用，除非我错过了一个必需的库？

任何建议都将不胜感激。

<html>
	<head>
		<meta charset="utf-8" />

		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>		
		
		<script>

			$('#radio_Search_BB').click(function()
			{  
				$('#searchall_field1').width(100);
				$('#searchall_field2').width(300);
				$('#searchall_field2').show();
				  
				$('#searchall_field1').attr('placeholder','Account');
				$('#searchall_field2').attr('placeholder','Company');
			});

			$('#radio_Search_RC').click(function()
			{
				$('#searchall_field1').width(400);
				$('#searchall_field1').attr('placeholder','Keywords');

				$('#searchall_field2').hide();  
			});
		
		</script>
	</head>

	<body>
		<p>jQuery: <script>document.write ($.fn.jquery);</script></p>
			
		<form id="" name="form_Search_All" action="search.php" method="post">
			<input id="searchall_field1" type="text" style="width: 100px;" name="searchall_field1" placeholder="Account">
			<input id="searchall_field2" type="text" style="width: 300px;" name="searchall_field2" placeholder="Company">						
						
			<input type="submit" name="btnSearch_All" value="+" />

			<span>
				<input type="radio" value="BB" name="radio_Search" id="radio_Search_BB" checked>
				<label for="radio_Search_BB">BB</label>
			</span>
			<span>
				<input type="radio" value="RC" name="radio_Search" id="radio_Search_RC">
				<label for="radio_Search_RC">RC</label>
			</span>
		</form>
	</body>
</html>

Answer 1

我添加了 $（document）.ready（），以确保在函数执行时创建 .click（）事件。

看看这个question。

<html>
    	<head>
    		<meta charset="utf-8" />

    		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    		
    		<script>
        $( document ).ready(function() {
            $('#radio_Search_BB').click(function()
            {  
              $('#searchall_field1').width(100);
              $('#searchall_field2').width(300);
              $('#searchall_field2').show();

              $('#searchall_field1').attr('placeholder','Account');
              $('#searchall_field2').attr('placeholder','Company');
            });

            $('#radio_Search_RC').click(function()
            {
              $('#searchall_field1').width(400);
              $('#searchall_field1').attr('placeholder','Keywords');

              $('#searchall_field2').hide();  
            });
        
         });
    		
    		</script>
    	</head>

    	<body>
    		<p>jQuery: <script>document.write ($.fn.jquery);</script></p>
    			
    		<input id="searchall_field1" type="text" style="width: 100px;" name="searchall_field1" placeholder="Account">
        <input id="searchall_field2" type="text" style="width: 300px;" name="searchall_field2" placeholder="Company">

        <span>
            <input type="radio" value="BB" name="radio_Search" id="radio_Search_BB" checked>
            <label for="radio_Search_BB">BB</label>
        </span>
        <span>
            <input type="radio" value="RC" name="radio_Search" id="radio_Search_RC">
            <label for="radio_Search_RC">RC</label>
        </span>
    	</body>
    </html>

动态更改网页上的文本框数

1 个答案: