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

【问题标题】：How to make the option value include more than 1 value?如何使期权价值包含超过1个价值？
【发布时间】：2020-05-04 12:32:04
【问题描述】：

我无法在输入字段中显示 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'] 可以显示不同的字段，希望有人能指导我解决这个问题。谢谢。

【问题讨论】：

您可以在 value 属性中使用数组，只需将元素用[] 括起来，如下所示：value="['value1', 'value2', 'value3']”

标签： php jquery onchange

【解决方案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" />

【讨论】：

感谢您的回答。但仍然无法在输入字段中显示正确的值
嘿@JohnSoon，我创建了一个对代码进行了一些更改的演示，看看它是否解决了您的问题。
乐于助人。 :)
你是天才。我在这里有其他问题stackoverflow.com/questions/61607893/…如果你有空可以看到这个问题。