基于只读输入框值自动填充另一只读输入框的技术求助

我完全明白你的困扰——readonly状态的输入框通过JavaScript赋值时，浏览器不会自动触发change事件，这就是你之前所有方案失效的核心原因！与其费劲去触发这个本就不会发生的事件，不如直接在下拉框的change事件里一次性完成两个输入框的赋值操作，一步到位解决问题。

修改后的完整代码 #

PHP部分（基本无需改动，可优化数据存储）

echo '<td align="left" width="8%" height="25px">';
$ddlquery4 = "SELECT * FROM dvd ORDER BY title ASC";
$ddlresult4 = mysqli_query($dbc, $ddlquery4) or die("Bad SQL: $ddlquery4");
echo '<select class="dropdown" name="dvdid" id="movieID" size="1">';
echo '<option value=""></option>';
while($ddlrow4=mysqli_fetch_array($ddlresult4, MYSQLI_ASSOC)){
    // 可选优化：把价格也存入data属性，后续JS直接取值更灵活
    $price = '';
    switch($ddlrow4['categoryname']){
        case 'Regular': $price = '.50'; break;
        case 'Popular': $price = '1.00'; break;
        case 'Current Release': $price = '1.50'; break;
        case 'Current Hit': $price = '2.00'; break;
    }
    echo "<option value='".$ddlrow4['dvdid']."' 
                  data-categoryname='".$ddlrow4['categoryname']."'
                  data-price='".$price."'>" 
         . $ddlrow4['title'] . "</option>";
}
echo "</select>";
echo '</td>';
echo '<td align="left" width="5%">';
echo '<input style="font-size:20px; border:0px; background:none; box-shadow:none;" 
             type="text" id="catName" name="categoryname" readonly>';
echo '</td>';
echo '<td align="left" width="4%">';
echo '<input type="text" id="catprice" name="price" readonly>';
echo '</td>';

JavaScript/jQuery部分（合并逻辑，无需监听只读输入框）

$(document).ready(function() {
    $('#movieID').change(function() {
        const selectedOption = $(this).find('option:selected');
        
        // 方式1：直接从data属性取预设好的价格（推荐，维护更方便）
        $('#catName').val(selectedOption.data('categoryname'));
        $('#catprice').val(selectedOption.data('price'));

        // 如果你不想在PHP里处理价格，也可以用原有的判断逻辑：
        // const categoryName = selectedOption.data('categoryname');
        // let price = '';
        // switch(categoryName) {
        //     case 'Regular': price = '.50'; break;
        //     case 'Popular': price = '1.00'; break;
        //     case 'Current Release': price = '1.50'; break;
        //     case 'Current Hit': price = '2.00'; break;
        // }
        // $('#catName').val(categoryName);
        // $('#catprice').val(price);
    });
});

为什么之前的方案都无效？ #

当你通过$('input[id=catName]').val(...)给只读输入框赋值时，这属于程序式修改，浏览器只会更新输入框的显示内容，不会触发change事件——这个事件只有用户手动操作输入框时才会触发。所以你绑定在#catName上的change监听永远不会被执行，自然无法同步更新价格。

内容的提问来源于stack exchange，提问作者Nu2This