时间戳

首页 > 解决方案 > 如何使用数据集值更新输入字段？

javascript - 如何使用数据集值更新输入字段？

问题描述

我无法弄清楚我错过了什么......我正在尝试执行之前已经完成的任务（更改<input>时更改值<select>），但我看不到我的代码在哪里失败。

然后我从一个单独的基于 woocommerce 的命令创建我的下拉菜单，datasets用于存储值；我想在两个关联的输入中使用这些值。

echo '<p><select id="product" name="product" onchange="change_details(this.value)">';
    echo '<option>-- Select SKU--</option>';
while ( $loop->have_posts() ) : $loop->the_post();
  global $product;
    $sku = $product->get_sku();
    echo '<option value=' . $sku . ' data-sales=' . $results[$sku]['sales'] .' data-token=' .$results[$sku]['token'] . '>' . $sku . ' </option>';
  endwhile;
echo '</select>';

这是我想更新两个输入字段以具有这些sales和token值的地方：

echo '<p><input type="text" placeholder="sales" id="sales" name="sales" size="20" /></p>'; 
echo '<p><input type="text" placeholder="e.g. token" id="token" name="token" size="20" /></p>';

最后，我的 onchange 函数的 javascript；

function change_details(){
        document.getElementById("sales").dataset.sales;
        document.getElementById("token").dataset.token;
}

标签： javascriptformsinputdrop-down-menudataset

解决方案

StackOverflow javascript 代码段生成器无法正常工作...

function change_details(obj){
  document.getElementById("sales").value = obj.options[obj.selectedIndex].dataset.sales;
  document.getElementById("token").value = obj.options[obj.selectedIndex].dataset.token;
}

<select onchange="change_details(this);">
  <option value="sku1" data-sales="sku_sales1" data-token="sku_token1">skuA</option>
  <option value="sku2" data-sales="sku_sales2" data-token="sku_token2">skuB</option>
  <option value="sku3" data-sales="sku_sales3" data-token="sku_token3">skuC</option>
  <option value="sku4" data-sales="sku_sales4" data-token="sku_token4">skuD</option>
</select>

<input type="text" placeholder="sales" id="sales" name="sales" size="20" />

<input type="text" placeholder="e.g. token" id="token" name="token" size="20" />

将选择元素对象传递给您的函数，然后使用纯 JavaScript 隔离所选选项，然后使用数据集值设置输入值。

https://jsfiddle.net/7b51f38t/12/

您的 javascript 函数实际上并没有“做任何事情”。

推荐阅读