Apabila memilih pilihan yang berbeza, jenis medan input boleh menyokong rupee 20 digit dengan simbol rupee atau digantikan dengan peratusan
P粉022140576
2023-08-13 18:35:32
<p>Jika pilihan dipilih untuk memilih nilai tetap, jenis medan input ialah nilai rupee hanya menyokong 20 digit dengan simbol rupee. Jika Peratus dipilih maka simbol Rupee digantikan dengan simbol Peratus dan jenis nilai hanya 2 digit untuk memasukkan nilai tanpa mengklik butang </p>
<p>Kod saya ini berfungsi dengan baik, tetapi saya menghadapi dua masalah kecil
1. Jika halaman web saya memuatkan nilai lalai yang ditetapkan kepada nilai tetap (tetapi nilai input dan simbol rupee tidak berfungsi</p><p>
2. Jika anda menukar nilai, maka kedua-duanya berfungsi, tetapi nilai tidak ditetapkan semula secara automatik kepada keadaan yang diubah. Nilai peratusan tidak lagi berubah jika pengguna memilih satu peratusan, sila semak mana-mana bahagian kod saya
Ini adalah kod serupa</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html>
<kepala>
<tajuk>Medan input</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<skrip>
$(document).ready(function() {
$('#dropdown').change(function() {
var selectedOption = $(this).val();
if (selectedOption === 'tetap') {
$('#inputField').attr('maxlength', '20');
$('#inputField').on('input', function() {
nilai var = $(this).val();
var formattedValue = '₹' + value.replace(/D/g, '').replace(/(d)(?=(d{3})+(?!d))/g, '$1,') ;
$(this).val(formattedValue);
});
} else if (selectedOption === 'peratusan') {
$('#inputField').attr('maxlength', '2');
$('#inputField').on('input', function() {
nilai var = $(this).val();
var formattedValue = value.replace(/D/g, '') + '%';
$(this).val(formattedValue);
});
}
});
});
</skrip>
</head>
<badan>
<pilih id="dropdown">
<nilai pilihan="tetap">Nilai tetap</option>
<nilai pilihan="peratusan">Peratusan</option>
</select>
<input type="text" id="inputField">
</badan>
</html></pre>
<p><br /></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Mari permudahkan perkara, buat fungsi berasingan dan gunakan logik anda pada medan teks berdasarkan fungsi itu.
Contoh:
$('#dropdown').change(function() { var selectedOption = $(this).val(); check(selectedOption); }); $('#inputField').on('input', function() { var selectedOption = $('#dropdown :selected').val(); check(selectedOption); }); function check(inp) { var value = $('#inputField').val(); if (inp === 'fixed') { $('#inputField').attr('maxlength', '20'); var formattedValue = '₹' + value.replace(/\D/g, '').replace(/(\d)(?=(\d{3})+(?!\d))/g, ','); $('#inputField').val(formattedValue); } else { $('#inputField').attr('maxlength', '2'); var formattedValue = value.replace(/\D/g, '') + '%'; $('#inputField').val(formattedValue); } }