如何使期权价值包含超过 1 个价值？

Question

我在输入字段中显示 4 个不同的数据时遇到问题。我已经创建了 onchange 函数来获取输入字段中的 1 值，但是如何让其他不同的数据显示在其他字段中：

下面是我的编码：

<div class="form-group">
    <label for="cp1" class="control-label col-lg-4">Move to Sub Folder/New Category<span style="color:red;">&nbsp;*</span></label>
    <div class="col-lg-3">
        <select onchange="getComboA(this)" class="form-control blank" id="parentid" name="parentid" title="parentid">
            <option>Please Select</option>
            <option value="New Category_value">New Category</option>

            <?php
            $sql_incharge = 'select * from filing_code_management where status=1 order by id';
            $arr_incharge = db_conn_select($sql_incharge);

            foreach ($arr_incharge as $rs_incharge) {
                $folder_location      = $rs_incharge['folder_location'];
                $function_code_select = $rs_incharge['function_code'];
                $function_name_select = $rs_incharge['function_name']
                $activity_code_select = $rs_incharge['activity_code']
                $activity_name_select = $rs_incharge['activity_name']

                echo '<option value="' . $rs_incharge['function_code'] . '">' . $rs_incharge['name'] . '</option>';

            }
            ?>
        </select> 
        &nbsp;&nbsp;
        <!--<input type="text" class="form-control blank" id="parentid" name="parentid" title="parentid" onblur="capitalize(this.id, this.value);">-->
    </div>
</div>

<div class="form-group">
    <label for="cp1" class="control-label col-lg-4">Function Code:</label>
        <div class="col-lg-3">
        <input type="text" class="form-control" id="function_code" name="function_code" title="function_code" value="">
    </div>
</div>

<div class="form-group">
    <label for="cp1" class="control-label col-lg-4">Function Name:</label>
    <div class="col-lg-3">
        <input type="text" class="form-control" id="function_name" name="function_name" title="function_name">
     </div>
</div>

<div class="form-group">
    <label for="cp1" class="control-label col-lg-4">Activity Code:</label>
    <div class="col-lg-3">
        <input type="text" class="form-control" id="activity_code" name="activity_code" title="activity_code">
     </div>
</div>

<div class="form-group">
    <label for="cp1" class="control-label col-lg-4">Activity Name:</label>
    <div class="col-lg-3">
        <input type="text" class="form-control" id="activity_name" name="activity_name" title="activity_name">
    </div>
</div>

<script>

function getComboA(selectObject) {
    var value = selectObject.value;
    document.getElementById("function_code").value =value;
    document.getElementById("function_name").value =value;
    document.getElementById("activity_code").value =value;
    document.getElementById("activity_name").value =value;
}

<script>

现在我的输出在输入字段中显示了 4 个相同的数据，如下图所示： Output 1

实际上我想显示 4 个不同的数据，现在我只使用此代码获取第一个数据 $rs_incharge['function_code']，如何让这些 $rs_incharge['function_name'], $rs_incharge['activity_code']$rs_incharge['activity_name'] 可以显示不同的字段，希望有人能指导我解决这个问题。谢谢

Answer 1

您应该将数据存储在 <option> 本身的附加属性中，然后获取值 onchange，然后执行您的操作。这应该对你有帮助。

<select onchange="getComboA(this)" class="form-control blank" id="parentid" name="parentid" title="parentid">
    <option selected disabled>Please Select</option>
    <!--Make this selected by default-->
    <option value="New Category_value" data-act_code="Your-default-act-code" data-act_name="Your-default-act-name">New Category</option

    <?php

    $sql_incharge = 'select * from filing_code_management where status=1 order by id';
    $arr_incharge = db_conn_select($sql_incharge);

    foreach ($arr_incharge as $rs_incharge) {
        $folder_location      = $rs_incharge['folder_location'];
        $function_code_select = $rs_incharge['function_code'];
        $function_name_select = $rs_incharge['function_name']
        $activity_code_select = $rs_incharge['activity_code']
        $activity_name_select = $rs_incharge['activity_name']

        // save the data here↓↓ in data attributes 
        echo "<option value='{$function_code_select}' data-act_code='{$activity_code_select}' data-act_name='{$activity_name_select}'>{$function_name_select}</option>";

    }

    ?>
</select>

然后在你的script

<script>

function getComboA(selectObject) {

    let func_code = selectObject.value; // get the value of selected option
    let func_name = selectObject.selectedOptions[0].textContent; // get the text of selected option
    let act_code  = selectObject.selectedOptions[0].getAttribute("data-act_code"); // get attribute of selected option
    let act_name  = selectObject.selectedOptions[0].getAttribute("data-act_name"); // get attribute of selected option

    document.getElementById("function_code").value = func_code;
    document.getElementById("function_name").value = func_name;
    document.getElementById("activity_code").value = act_code;
    document.getElementById("activity_name").value = act_name;
}

</script>

下面是我所说内容的快速演示-

function getComboA(selectObject) {

  let func_code = selectObject.value; // get the value of selected option
  let func_name = selectObject.selectedOptions[0].textContent; // get the text of selected option
  let act_code = selectObject.selectedOptions[0].getAttribute("data-act_code"); // get attribute of selected option
  let act_name = selectObject.selectedOptions[0].getAttribute("data-act_name"); // get attribute of selected option

  document.getElementById("function_code").value = func_code;
  document.getElementById("function_name").value = func_name;
  document.getElementById("activity_code").value = act_code;
  document.getElementById("activity_name").value = act_name;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<select onchange="getComboA(this)" class="form-control blank" id="parentid" name="parentid" title="parentid">
  <option selected disabled>Please Select</option>
  <!--Make this selected by default-->
  <option value="New Category_value" data-act_code="Your-default-act-code" data-act_name="Your-default-act-name">New Category</option>
  <!-- Provide default values here -->
  <!-- After giving values via PHP your HTML code should look like this-->
  <option value='Function Code 1' data-act_code='Activity Code 1' data-act_name='Activity Name 1'>Function Name 1</option>
  <option value='Function Code 2' data-act_code='Activity Code 2' data-act_name='Activity Name 2'>Function Name 2</option>
  <option value='Function Code 3' data-act_code='Activity Code 3' data-act_name='Activity Name 3'>Function Name 3</option>
</select>

Function Code: <input type="text" class="form-control" id="function_code" name="function_code" title="function_code" /><br>
Function Name: <input type="text" class="form-control" id="function_name" name="function_name" title="function_name" /><br>
Activity Code: <input type="text" class="form-control" id="activity_code" name="activity_code" title="activity_code" /><br>
Activity Name: <input type="text" class="form-control" id="activity_name" name="activity_name" title="activity_name" />

如何使期权价值包含超过 1 个价值？

How to make the option value include more than 1 value?

php

jquery

onchange