时间戳

首页 > 解决方案 > PHP/Javascript 动态选择选项 - 如何处理选择选项文本中的撇号问题

javascript - PHP/Javascript 动态选择选项 - 如何处理选择选项文本中的撇号问题

问题描述

我已经阅读了很多关于这个主题的帖子，但是我遇到的建议的解决方案都没有帮助我解决我的问题。

我有一个基于 MySql 查询的结果在 PHP 中构建的动态 HTML 选择框。除了选择选项的选定文本值之外，在 value 属性中，我将两个值传递给 Javascript 以供以后使用，它们以逗号分隔（与问题无关，只是为了使下面的代码更清晰） .

我完全理解字符串中的撇号会导致问题，需要采取特殊的预防措施来处理它们。我的工作理论是，在动态创建选择框控件时，我只需要在任何单引号之前放置一个 '' 字符，以便稍后由 javascript 逐字处理传递的值。

我的动态 PHP 选择框代码如下所示：

$locSql = "select name, shortname, locationid from location_tbl l where ....";
    $locResultSet = mysqli_query($conn, $locSql) or die("Bad SQL " . $locSql); 

    $opt = "<select name='selFieldLocation' id='fieldLocation' onChange='setSelectedLocName(this);'>";
    $opt .= '<option value="blank">Select Location</option>';
    while ($row = mysqli_fetch_assoc($locResultSet)) {
        $selectedLocID = $row['locationid']; 
        
        // This echo statement returns the value from the database, e.g.....
        // "SUN Men's Group"
        echo 'first row shortname ' . $row['shortname'] . "<br>";

        // Applied "addslashes" to that value.
        $thisShortName = addslashes($row['shortname']);

        // Echo the new value....
        // The result is: "SUN Men\'s Group" (which is what i was after)
        echo 'new shortname is ' . $thisShortName . "<br>";

        $opt .= "<option value='{$row['locationid']},$thisShortName'> {$row['name']} </option>\n"; 
        //echo 'row shortname ' . $thisShortName . "<br>";
    }
    $opt .= "</select>";
    $opt .= '<input type="hidden" name="selLocText" id="selLocText"  />';
    $opt .= '<input type="hidden" name="selLocShortName" id="selLocShortName"  />';

    var_dump($opt);

正如我所料，最后的 var_dump 显示了用于创建选择框的动态代码：

'<select name='selFieldLocation' id='fieldLocation' onChange='setSelectedLocName(this);'><option value="blank">Select Location</option><option value='11,SUN Men\'s League'> Sunday Men's Group </option>
<option value='30,WED. - Men\'s Group'> Wednesday - Men's Group </option>
<option value='19,TUES. - Men\'s Group'> Tuesday - Men's Group </option>

实际上，当用户选择一个选项时，会调用“setSelectedLocName”javascript 函数（它驻留在外部 JS 文件中）。该代码如下所示：

function setSelectedLocName (x) {
  
  alert('Checking passed values ' + x.options[x.selectedIndex].value);
  var selectedLocName = x.options[x.selectedIndex].text;
  etc....

上面的警报语句中显示的内容如下所示：

Checking passed values: 11,SUN Men\
or
Checking passed values: 30,WED. - Men\
etc....

简而言之，我一直认为用斜杠 ("") 转义单引号（正如 PHP 的“addslashes”函数所做的那样）会告诉 javascript 从字面上处理单引号，但 JS 似乎仍然截断了字符串在单引号。有趣的是，“x.options[x.selectedIndex].text”值（在字符串中也包含一个单引号）在没有任何程序员干预的情况下正确传递。（？）

任何人都可以提出一种可以让我在这里实现目标的方法吗？看来（至少对我而言）我已经完全按照我希望的样子设置了动态选择框。非常感谢您的帮助！

标签： javascriptphphtml

解决方案

您可以尝试其他方法，而不是将您正在创建的整个 html 加载到字符串 html ($opt) 变量中并一次显示所有内容。

您可以在需要 html 的位置放置一个循环（while 或收集其中的数据并在正确的位置创建一个），并在此处创建它，如下所示：

?>
 <select name="selFieldLocation" id="fieldLocation" onChange="setSelectedLocName(this);"></select>
    <option value="blank">Select Location</option>
<?php
    while ($row = mysqli_fetch_assoc($locResultSet)) {
?>
    <option value="<?php echo $row['locationid'];?>,<?php echo $thisShortName;?>"><?php echo $row['name'];?></option>
<?php

    } ?>
 </select>
 <input ....

这样，您可以节省很多撇号！-- 而不是 echo $opt; 我们创建 html 并在它之间放置循环，这实际上是在 PHP 代码中构建 html 的一种更简单的方法，但它有时会迫使您在 html 中构建循环......

这是 PHP 的最佳功能之一……就像您将其粘贴在 JS 脚本中一样，您也可以将其粘贴在 HTML 中！:)

这与您的代码中的模拟数据：

$row['locationid'] = 30;
$thisShortName = "SUN Men\'s Group";
$row['name'] = "Tuesday - Men's Group";
?>
<option value="<?php echo $row['locationid'];?>,<?php echo $thisShortName;?>"><?php echo $row['name'];?></option>

将返回：

<option value="30,SUN Men\'s Group">Tuesday - Men's Group</option>

推荐阅读