自动选择值<select multiple =“multiple”>

时间:2017-04-15 20:57:56

标签: php jquery html

我是编码的新手但是试图帮助自己。如果任何人可以建议会很棒。 我正在使用一个创建下面表单的插件。我通过检查浏览器上的元素来检查这个。 &lt; select multiple =&#34; multiple&#34;命名=&#34; attendee_information_fields []&#34; ID =&#34; attendee_information_fields&#34;类=&#34;事件管理器,多选&#34; data-no_results_text =&#34;没有结果匹配&#34;属性=&#34;&#34; data-multiple_text =&#34;选择一些选项&#34; style =&#34; display:none;&#34;&gt;         &lt; option value =&#34;全名&#34;&gt;全名&lt; / option&gt;         &lt; option value =&#34; email-address&#34;&gt;电子邮件地址&lt; / option&gt;         &lt; option value =&#34; phone&#34;&gt; Phone&lt; / option&gt;         &lt; option value =&#34; location&#34;&gt; Location&lt; / option&gt;         &lt;选项值=&#34;性别&#34;&gt;性别&lt; /选项&gt;         &lt; option value =&#34; age&#34;&gt; Age&lt; / option&gt;         &lt; option value =&#34; terms-conditions&#34;&gt; Terms&amp; amp; amp; amp;状况及LT; /选项&GT;         &lt; option value =&#34;成为-acp-camper&#34;&gt;成为CFP Camper&lt; / option&gt; &LT; /选择&GT; 这是一个必填字段。我想要的是选项值应该使用值条件和条件自动选择并成为一个cfp-camper。为此,我在我的主题函数.php文件中编写下面的代码: if($ _ POST [&#39; attendee_information_fields&#39;]){echo&#34; &lt; script type =&#39; text / javascript&#39;&gt; $(&#39;#attendee_information_fields&#39;)。click(function(){     $(&#39;选择#terms-conditions&gt;选项&#39;)。attr(&#39;选择&#39;,&#39;选择&#39;);     $(&#39;选择#cult-a-cfp-camper&gt;选项&#39;)。attr(&#39;选择&#39;,&#39;选择&#39;); }); &LT; /脚本&GT;&#34 ;; } 似乎什么也没发生,我一无所知。任何人都可以帮助我如何实现这一目标?非常感谢。

2 个答案:

答案 0 :(得分:0)

<div> <h1>Lorem ipsum dolor sit amet.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad qui repudiandae ipsum delectus fugiat esse voluptates numquam nesciunt, officiis, repellendus consequuntur optio. Tempora magni aliquam, nulla fuga quam deserunt veritatis.</p> </div>正在尝试查找<?php if(!empty($_POST['code'])){ $code = strtoupper($code); $param[':code'] = $_POST['code']; $sql .= 'AND `code` = :code'; } ?> 内的所有$('select#terms-conditions > option')元素。你没有那个;相反,您有<option>,其中包含<select id="terms-conditions">

要选择该选项,您需要使用<select id="attendee_information_fields">

答案 1 :(得分:0)

您的问题有几个问题:

  1. 您的jQuery正在选择带有ID(<select>)的$('select#terms-conditions > option')元素,当您要执行的操作实际上是搜索具有匹配值的嵌套<option>元素时,例如($('select option[value="terms-conditions"]')
  2. 您正在使用.attr()而不是.prop()来设置布尔属性
  3. 我的解决方案如下:

    1. 聆听<select>字段的修改(我们尽量避免在输入元素上侦听点击事件)。这是通过绑定.change()方法
    2. 来完成的
    3. 浏览元素中找到的所有<option>元素(由$(this).find('option')引用)
    4. 我们使用jQuery的.filter()方法过滤此集合,仅返回其value属性在数组中找到的元素。数组应包含您有兴趣选择的值:使用本机JS中的简单Array.prototype.indexOf方法进行求值:当索引返回为0或更多时,表示该值在您的数组中。您要查看的数组将为['become-a-cfp-camper', 'terms-conditions']
    5. 要过滤选择的<option>元素,我们只需使用.prop('selected', true)以编程方式选择它们。
    6. $(function() {
        $('#attendee_information_fields').change(function() {
          $(this).find('option').filter(function() {
            return ['become-a-cfp-camper', 'terms-conditions'].indexOf($(this).val()) > -1;
          }).prop('selected', true);
        });
      });
      select {
        height: 200px; /* Just to have a better view */
      }
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <select multiple name="attendee_information_fields[]" id="attendee_information_fields" class="event-manager-multiselect" data-no_results_text="No results match" attribute="" data-multiple_text="Select Some Options">
              <option value="full-name">Full name</option>
              <option value="email-address">Email address</option>
              <option value="phone">Phone</option>
              <option value="location">Location</option>
              <option value="gender">Gender</option>
              <option value="age">Age</option>
              <option value="terms-conditions">Terms &amp; Conditions</option>
              <option value="become-a-cfp-camper">Become a CFP Camper</option>
      </select>