How can I create a pair of dropdowns such that when one is selected, the options for the other one are updated?


$stateList = $block->getStates();

        <h3 class="text-uppercase margin-bottom15"><?php echo __('Pedir una Cita') ?></h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
            <form id="search_cita">
                <div class="form-group states required">
                    <select id="state" name="state">
                        <option value="">Estado</option>
                        <?php foreach($stateList as $index): ?>
                        <?php  echo '<option value="'.$index['state'].'">'.$index['state'].'</option>'; ?>
                        <?php endforeach ?>
                <div class="form-group cities required">
                    <div class="control">
                        <select name="city" id="city" class="input-text" data-validate="{required:true}">
                            <!--option value="">Ciudad</option-->    

                    <button type="submit" class="btn btn-primary"><?php echo __('Buscar un taller') ?></button>


        require(['jquery', 'jquery/ui'],function(){
                jQuery(document).on('change','#state',function() {
                    var param = 'frame='+jQuery('#state option:selected').attr('value');
                    var url = "<?php echo $block->getStateAction(); ?>";
                        showLoader: true,
                        url: url,
                        data: param,
                        type: "POST",
                        dataType: 'json'
                    }).done(function (data) {



namespace Morwi\Citas\Block;

class Display extends \Magento\Framework\View\Element\Template {
    protected $_isScopePrivate;
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\Directory\Block\Data $directoryBlock,
        array $data = []
    ) {
        parent::__construct($context, $data);
        $this->directoryBlock = $directoryBlock;
        $this->_isScopePrivate = true;

    public function getStateAction() {
        return $this->getUrl('citas/index/display', ['_secure' => true]);



namespace Morwi\Citas\Controller\Index;

use Magento\Framework\Controller\ResultFactory;

class Display extends \Magento\Framework\App\Action\Action {
    protected $_resultPageFactory;
    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
        $this->_resultPageFactory = $resultPageFactory;

    public function execute() {
        $result = $this->resultFactory->create(ResultFactory::TYPE_JSON);

        $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
        $resource = $objectManager->get('Magento\Framework\App\ResourceConnection');
        $connection = $resource->getConnection();

        $html='<option selected="selected" value="">Ciudad</option>';

        $stateName = $this->getRequest()->getParam('frame');

        if($stateName!='') {

            $tblSL = $resource->getTableName('store_locator');

            $sql = "SELECT DISTINCT city from " . $tblSL . " WHERE state LIKE '%". $stateName ."%'";
            $city = $connection->fetchAll($sql);  

            foreach($city as $index){
                $hmtl= '<option value="'.$index['city'].'">'.$index['city'].'</option>'; 

        return $result->setData(['success'=>true,'value'=>$html]);



But this returns to me

enter image description here

in success I don't paint the html

Any help would be appreciated.



Change following line:

foreach($city as $index){
   $hmtl .= '<option value="'.$index['city'].'">'.$index['city'].'</option>'; 
| improve this answer | |
  • I made the change, but it still shows the same – May McFly Aug 2 '19 at 17:25
  • $stateName = $this->getRequest()->getParam('frame'); -> this line too – Sohel Rana Aug 2 '19 at 17:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.