Question

我无法弄清丢失的内容...我试图做以前完成的任务（更改<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;
}

Answer 1

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" />

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

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

您的javascript函数实际上不是在“做任何事情”。

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

1 个答案: