HTML Select，通过 Ajax 返回的选项，应该选择的项目没有被选择答案

【问题标题】：HTML Select, options returned via Ajax, item that should be selected is not being selectedHTML Select，通过 Ajax 返回的选项，应该选择的项目没有被选择
【发布时间】：2018-01-27 23:43:42
【问题描述】：

这是一个奇怪的问题。我在其他人和示例代码等的帮助下，整理了一个例程，该例程基于一次选择，通过 ajax 将值传递给 php 文件，然后使用选项构建第二个选择，每个选项都有代码集检查变量的值并设置选定的属性。以下是返回的带有选项的 select 语句的示例：

<select class='form-control' id='branch' name='branch'>
   <option value = '' selected></option>
   <option value="Caldarium"<?php if( $branch=="Caldarium" ) echo ' selected' ?>Caldarium</option>
   <option value="Cloondara"<?php if( $branch=="Cloondara" ) echo ' selected' ?>Cloondara</option>
   <option value="Crosston"<?php if( $branch=="Crosston" ) echo ' selected' ?>Crosston</option>
   <option value="Darkwood"<?php if( $branch=="Darkwood" ) echo ' selected' ?>Darkwood</option>
   <option value="Darkwood - Caer Darth"<?php if( $branch=="Darkwood - Caer Darth" ) echo ' selected' ?>Darkwood - Caer Darth</option>
   <option value="Darkwood - Hawks Haven"<?php if( $branch=="Darkwood - Hawks Haven" ) echo ' selected' ?>Darkwood - Hawks Haven</option>
   <option value="Darkwood - Konigstadt"<?php if( $branch=="Darkwood - Konigstadt" ) echo ' selected' ?>Darkwood - Konigstadt</option>
   <option value="Darkwood - Montaigne du Roi"<?php if( $branch=="Darkwood - Montaigne du Roi" ) echo ' selected' ?>Darkwood - Montaigne du Roi</option>
   <option value="Darkwood - St. David's"<?php if( $branch=="Darkwood - St. David's" ) echo ' selected' ?>Darkwood - St. David's</option>
   <option value="Esfenn"<?php if( $branch=="Esfenn" ) echo ' selected' ?>Esfenn</option>
   <option value="Southern Shores"<?php if( $branch=="Southern Shores" ) echo ' selected' ?>Southern Shores</option>
   <option value="St. Katherine"<?php if( $branch=="St. Katherine" ) echo ' selected' ?>St. Katherine</option>
   <option value="Teufelberg"<?php if( $branch=="Teufelberg" ) echo ' selected' ?>Teufelberg</option>
   <option value="the Mists"<?php if( $branch=="the Mists" ) echo ' selected' ?>the Mists</option>
   <option value="Vinhold"<?php if( $branch=="Vinhold" ) echo ' selected' ?>Vinhold</option>
   <option value="Westermark"<?php if( $branch=="Westermark" ) echo ' selected' ?>Westermark</option>
   <option value="Wolfscairn"<?php if( $branch=="Wolfscairn" ) echo ' selected' ?>Wolfscairn</option>
</select>

理论上 PHP (?>) 的问号后面应该有一个右括号，但它显示在字符串中。

无论如何，如果我将此代码直接复制到 HTML 中，一切都会按预期进行。如果我通过 JavaScript 中的命令将其填充到 DIV 标记的 html 中，例如：

$("#namebranchoptions").html(data);

内容在选择中正确显示，但没有显示为已选择（显示为空白）。在此之后，我在 HTML 中插入了一条语句来显示变量的值：

<?php echo "Branch: " . $branch . "<br />" ?>

这显示正确。我难住了。如前所述，如果我将上述内容粘贴到 HTML 中，手动粘贴到 DIV 标记中并重新加载页面，我会得到预期的结果。我不明白为什么会有这种差异。我不知道这可能是 SELECT 或其他一些微妙的方面。这……令人沮丧。

【问题讨论】：

PHP 是否真的返回了一个包含所有 if 语句的字符串？它应该在服务器端执行它们。
显示你的 PHP 脚本。我怀疑你在echo 中而不是在?> 之后。
嗯。我已经习惯了在标签中使用 php 代码设置选项的想法，以至于我没有想到只在 PHP 方面这样做是有意义的。我很快就会对此进行测试......感谢您指出这一点。有时明显的并不明显。然而，考虑代码并查看它——困难在于我没有将分支传递给 PHP 代码。我也需要看看。现在我要经过的只是该地区。
我不确定如何将值传递给 Javascript/Ajax 代码。该值在 PHP 变量中，但不在其他任何地方。如何引用它？

标签： javascript php ajax

【解决方案1】：

如果您这样做，您不会选择 2x 元素吗？ <option value = '' selected></option>?即使没有selected 属性，默认情况下也会选择第一个选项，除非在兄弟节点上指定了 selected 属性。

在您的每个开始选项标签上都缺少一个结束 >，这可能会造成困难。在echo ' selected' ?> 之后，您将关闭<?php ### ?>，而不是html-tag。

<select class='form-control' id='branch' name='branch'>
   <option value = '' selected></option>
   <option value="Caldarium"<?php if( $branch=="Caldarium" ) echo ' selected' ?>>Caldarium</option>
   <option value="Cloondara"<?php if( $branch=="Cloondara" ) echo ' selected' ?>>Cloondara</option>
   <option value="Crosston"<?php if( $branch=="Crosston" ) echo ' selected' ?>>Crosston</option>
   <option value="Darkwood"<?php if( $branch=="Darkwood" ) echo ' selected' ?>>Darkwood</option>
   <option value="Darkwood - Caer Darth"<?php if( $branch=="Darkwood - Caer Darth" ) echo ' selected' ?>>Darkwood - Caer Darth</option>
   <option value="Darkwood - Hawks Haven"<?php if( $branch=="Darkwood - Hawks Haven" ) echo ' selected' ?>>Darkwood - Hawks Haven</option>
   <option value="Darkwood - Konigstadt"<?php if( $branch=="Darkwood - Konigstadt" ) echo ' selected' ?>>Darkwood - Konigstadt</option>
   <option value="Darkwood - Montaigne du Roi"<?php if( $branch=="Darkwood - Montaigne du Roi" ) echo ' selected' ?>>Darkwood - Montaigne du Roi</option>
   <option value="Darkwood - St. David's"<?php if( $branch=="Darkwood - St. David's" ) echo ' selected' ?>>Darkwood - St. David's</option>
   <option value="Esfenn"<?php if( $branch=="Esfenn" ) echo ' selected' ?>>Esfenn</option>
   <option value="Southern Shores"<?php if( $branch=="Southern Shores" ) echo ' selected' ?>>Southern Shores</option>
   <option value="St. Katherine"<?php if( $branch=="St. Katherine" ) echo ' selected' ?>>St. Katherine</option>
   <option value="Teufelberg"<?php if( $branch=="Teufelberg" ) echo ' selected' ?>>Teufelberg</option>
   <option value="the Mists"<?php if( $branch=="the Mists" ) echo ' selected' ?>>the Mists</option>
   <option value="Vinhold"<?php if( $branch=="Vinhold" ) echo ' selected' ?>>Vinhold</option>
   <option value="Westermark"<?php if( $branch=="Westermark" ) echo ' selected' ?>>Westermark</option>
   <option value="Wolfscairn"<?php if( $branch=="Wolfscairn" ) echo ' selected' ?>>Wolfscairn</option>
</select>

如果循环遍历数组，代码会更简洁。喜欢：

    $things = array(
       array('name'=>'Caldarium'),
       ... etc..
    );
    $element = '<select class='form-control' id='branch' name='branch'>';
     $element = '<option value=""></option>';
     foreach ($things as $thing){ 
       $selected=''; 
       if($thing['name']===$branch){
          $selected="selected"
       } 
       $element .= '<option value="'.$thing['name].'" '.$selected.'>'.$thing['name].'</option>';
     }
    $element .= '</select>
    echo $element

【讨论】：

我知道缺少尖括号，奇怪的是，如果它在那里，选项标签出现在选择中：>Caldarium 等。如果我把它拿出来，他们不会。
有趣，谢谢指出。该代码是否在 echo 语句的末尾不带分号运行？不应该是`echo'selected'；`不是`echo'selected'`
如果我将它直接复制并粘贴到 HTML 中，而没有 JavaScript 加载它，是的。这很奇怪。代码上的引号按原样工作，由于嵌套分隔符，我在使用引号时有点不一致。无论如何，正如您所看到的，由于这里的回复，我确实设法找到了解决方案。
感谢@KenMayer，不要忘记投票 :) 这意味着在棘手的问题上可以获得更多的奖励。很高兴您找到了解决方案。
看看你的声望点数是昨天 22 点，而今天是 37 点？这是因为我单击了您的问题和答案左侧的小向上箭头。当提供好的解释和问题时，这就是我们在这里表示感谢的方式

【解决方案2】：

感谢您的建议。在有点困惑之后，我想出了如何处理它......正如第一条评论所指出的那样，PHP程序应该确定标记为“select”ed的选项......然后技巧变成了引用分支我需要进行比较（确定哪个选项设置了 select 属性的值是什么）。我使用了一个隐藏的输入集：

<input id="namebranch" value = "<?php echo $branch; ?>" hidden />

然后修改ajax代码：

    function getNameBranch()
     {
        var region = document.getElementById("nameregion").value;
        var branch = document.getElementById("namebranch").value;
        $.ajax
       ({
           type: "POST",
           url: "namebranch.php",
           data: { 'myRegion' : region, 'branch' : branch },
           //cache: false,
           success: function(data)
           {
//alert( data );                 
              $("#namebranchoptions").html(data);
           }  // end success
        }); // end ajax call
     }; // end function getNameBranch

在稍微修改了 PHP 以确保我有正确的选项后，它可以完美运行。感谢您为我指明正确的方向！

【讨论】：