Question

我创建了一个用于向数据库添加零件的表单。我知道了。但是我仍然认为必须有一种更有效/更优雅的方法来完成此操作，希望有人可以帮助我，从而提高我的技能。我想做的事：参数信息从数据库加载并解析到页面（此数据的示例如下所示）。用户选择参数时，必须动态加载单位符号。现在，我实现了JS代码，该代码将PHP变量转换为JS，并找到与该符号匹配的ID，并更新了该字段。但是我在生成参数名称字段的选择选项列表时已经知道符号和ID。因此，我想知道是否可以在单位字段或其他地方存储此信息，因此JS代码只需选择正确的ID，而不必完全遍历数组以找到与ID相匹配的符号。

选择选项将以$ data ['parameters']的形式解析到页面（PHP），该数组如下所示：

array(7) {  
[0]=>
object(stdClass)#80 (3) {
["id"]=>
string(1) "1"
["name"]=>
string(10) "Resistance"
["symbol"]=>
string(2) "Ω"
}
[1]=>
object(stdClass)#84 (3) {
["id"]=>
string(1) "2"
["name"]=>
string(11) "Capacitance"
["symbol"]=>
string(1) "F"
}
}

表单html代码：

    <!--Parameters-->
<div class="card card-body bg-light mb-1">
    <div class="row no-gutters">
        <div class="col-md-1">Param:</div>
        <div class="ml-1 col-md-2">Name:</div>
        <div class="col-md-3">Prefix: Value: Suffix: Unit:</div>
        <div class="ml-4 col-md-2">Name:</div>
        <div class="col-md-3">Prefix: Value: Suffix: Unit:</div>
        <div class="col-md-1"></div>
    </div>
    <div class="row form-group align-items-center no-gutters">
        <div class="col-md-1">
            <i>1:</i>
        </div>
        <div class="col-md-2">
            <select name="parameter[]" class="parameter form-control">
                <option selected></option>
                <?php foreach ($data['parameters'] as $parameter) : ?>
                    <option value="<?php echo $parameter->id; ?>">
                        <?php echo $parameter->name; ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="mr-2 col-md-3">
            <div class="row no-gutters">
                <div class="col-md-3">
                    <select name="prefix[]" class="form-control">
                        <option selected></option>
                        <?php foreach ($data['prefixes'] as $prefix) : ?>
                            <option value="<?php echo $prefix->id; ?>">
                                <?php echo $prefix->prefix; ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md">
                    <input class="form-control" type="text" name="" id="">
                </div>
                <div class="col-md-3">
                    <select name="suffix[]" class="form-control">
                        <option selected></option>
                        <?php foreach ($data['suffixes'] as $suffix) : ?>
                            <option value="<?php echo $suffix->id; ?>">
                                <?php echo $suffix->suffix; ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md-3">
                    <input type="text" value="" class="form-control" readonly>
                </div>
            </div>
        </div>
        @
        <div class="ml-2 col-md-2">
            <select name="subparameter[]" class="subparameter form-control">
                <option selected></option>
                <?php foreach ($data['parameters'] as $parameter) : ?>
                    <option value="<?php echo $parameter->id; ?>">
                        <?php echo $parameter->name; ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="mr-2 col-md-3">
            <div class="row no-gutters">
                <div class="col-md-3">
                    <select name="subprefix[]" class="form-control">
                        <option selected></option>
                        <?php foreach ($data['prefixes'] as $prefix) : ?>
                            <option value="<?php echo $prefix->id; ?>">
                                <?php echo $prefix->prefix; ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md">
                    <input class="form-control" type="text" name="" id="">
                </div>
                <div class="col-md-3">
                    <select name="subsuffix[]" class="form-control">
                        <option selected></option>
                        <?php foreach ($data['suffixes'] as $suffix) : ?>
                            <option value="<?php echo $suffix->id; ?>">
                                <?php echo $suffix->suffix; ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md-3">
                    <input type="text" value="" class="form-control" readonly>
                </div>
            </div>
        </div>
        <div class="ml-1 col-md">
            <button type="button" class="btn btn-secondary btn-block "><i class="fas fa-minus"></i></button>
        </div>
    </div>
    <button type="button" class="btn btn-secondary btn-block"><i class="fas fa-plus"></i> Add Parameter</button>
</div>

JS代码：

    //Show parameter unit Symbol TODO: maybe make function because code is copied; TODO: maybe better to store symbols in java array while generating option list 
$(".parameter").change(function() {
    //Get parameter id
    var paramId = $(this).val();
    //Get parameters array (id, unit, symbol) as json format
    var parametersJsonArr = <?php echo json_encode($data['parameters']); ?>;
    //get object were id matches
    var data_filter = parametersJsonArr.filter(element => element.id == paramId);
    //Get the symbol connected to the id
    var unitSymbol;
    if(data_filter.length) {
        unitSymbol = data_filter[0].symbol;
    }else{
        unitSymbol = "";
    }
    //set variable of readonly input field
    $(this).parent().parent().find("input[type='text']").eq(1).val(unitSymbol);
});

先谢谢您，汤姆

动态填充只读文本输入PHP数据

0 个答案: