We have moved our forum to GitHub Discussions. For questions about Phalcon v3/v4/v5 you can visit here and for Phalcon v6 here.

Phalcon Custom Select List Element

Hi , Now I Face Big Problem . I Try To Create Custom Render To Select List I Try To Build Countries List With Image OF Country Flag And Country Name But When I Try Add Image Tag Inside Option Tag , But Phalcon Strip It and Only Show Text Here 's My Code

public function render($attributes = null)
{
      $html = "<select id='" . $this->getName() ."' name='" . $this->getName() . "'>";
      foreach($this->getAttributes () as $option)
      {
      $html .= "<option value='" . $option['country_code']. "'>";
      $html .= tag::image(array('frontend/images/country_flags/' . $option['flag']));
      $html .= "</option>";

      }
      $html .="</select>";
      return $html;
}


4.4k
Accepted
answer
edited Aug '15

This happens because option tag accepts only normal character data

https://www.w3.org/TR/html-markup/option.html

This can be helpful:

https://jqueryui.com/selectmenu/#custom_render

I lile this jQuery plugin better Select2 It is easy to modify it. pass a function to formatResult

    $('#id').select2({
        formatResult: formatSelect
    });

    function formatSelect(state) {
        return "here you can add your custom markup" +*/ state.text;
    }