Javascript 选择下拉列表后，需要动态加载下拉列表

用户有一个随机下拉列表，用于选择值。然后，根据他们选择的值，我需要另一个下拉列表。用户将有一个下拉列表，列出他们想要对其执行操作的项目，然后我有另一个下拉列表，列出他们想要对所选项目执行的操作。在PHP或javascript从第一个下拉列表中选择某个内容后，是否仍然可以动态加载第二个下拉列表的值？？？下面是一个min示例……这是第一个下拉列表：

<label for="mydropdown" datalabel="mydropdown">Country:</label>    
<select name="mydropdown">
    <option value="United States">United States</option>
    <option value="Canada">Canada</option>
    <option value="Mexico">Mexico</option>
    <option value="Other">Not Listed</option>
</select>

然后我需要加载另一个下拉列表，根据他们的选择，但我不知道该怎么做…我要重新加载页面吗

下面是我用PHP返回的内容

public function actionDropdownlist (){
        $openListFieldAction = new CampaignOpenActionListField();

        if(isset($_POST['Selectedcampaign_id'])) {
            $postCampaign = $_POST['Selectedcampaign_id'];

            $criteria = new CDbCriteria();
            $criteria->compare('campaign_id', $postCampaign);
            $criteria->compare('customer_id', (int)Yii::app()->customer->getId());
            $ajaxCampaign = Campaign::model()->find($criteria);

            $openListFieldAction->campaign_id = $ajaxCampaign->campaign_id;
            $openListFieldAction->list_id = $ajaxCampaign->list_id;
            $openListFieldActionOptions = $openListFieldAction->getTextFieldsAsDropDownOptions();
            echo json_encode(array("openListFieldActionOptions"=>$openListFieldActionOptions));
        }
    }

当我在控制台上记录我的JSONResponse时，控制台会向我显示：

Object {openListFieldActionOptions: Object}
openListFieldActionOptions
:
Object
288880
:
"FOFO"
__proto__
:
Object
constructor
:
function Object()
hasOwnProperty
:
function hasOwnProperty()
isPrototypeOf
:
function isPrototypeOf()
propertyIsEnumerable
:
function propertyIsEnumerable()
toLocaleString
:
function toLocaleString()
toString
:
function toString()
valueOf
:
function valueOf()
__defineGetter__
:
function __defineGetter__()
__defineSetter__
:
function __defineSetter__()
__lookupGetter__
:
function __lookupGetter__()
__lookupSetter__
:
function __lookupSetter__()
get __proto__
:
function __proto__()
set __proto__
:
function __proto__()
__proto__
:
Object
constructor
:
function Object()
hasOwnProperty
:
function hasOwnProperty()
isPrototypeOf
:
function isPrototypeOf()
propertyIsEnumerable
:
function propertyIsEnumerable()
toLocaleString
:
function toLocaleString()
toString
:
function toString()
valueOf
:
function valueOf()
__defineGetter__
:
function __defineGetter__()
__defineSetter__
:
function __defineSetter__()
__lookupGetter__
:
function __lookupGetter__()
__lookupSetter__
:
function __lookupSetter__()
get __proto__
:
function __proto__()
set __proto__
:
function __proto__()

---

只需使用ajax结果即可：

 success: function (response) {
    var jsonResponse = $.parseJSON(response);
    //process here
 }

但我不建议这样做，而是使用transpiler：

$("#select_item_chosen").change(async function() {
   showEl(this);

   let response = await callAjax();

   let jsonResponse = $.parseJSON(response);

   renderDropDown(jsonResponce,$('body'));
}

function callAjax(){
  return $.ajax({});
 }

function showEl(el){
  var el = $(el);
  console.log(el.val());
 }

function renderDropDown(data,target){
  var select = $('<select>');
  data.forEach(x=>{
    var option = $('<option>',{value:x.value});
    option.html(x.text);
    select.append(option);
  });
  target.append(select);
 }

---

这是一个很好的例子，说明你正在努力完成的事情。我想这正是你想要的

---

那么，您是否在url:create中编写了所引用的PHP脚本？如果您有json格式的响应数组，那么您可以使用javascript/jquerywell循环并创建新元素。。如果您得到的是json格式的响应，您不能执行类似$.eachjsonResponse、functionk、v{$'mydropdown'.appendv；}；好的，我用我在backendidk中所做的更新了我的响应这看起来太复杂了，从json结果$.post'url'，data，x=>renderDropDownx，$'body'加载下拉列表的最简单方法是什么

$("#select_item_chosen").change(async function() {
   showEl(this);

   let response = await callAjax();

   let jsonResponse = $.parseJSON(response);

   renderDropDown(jsonResponce,$('body'));
}

function callAjax(){
  return $.ajax({});
 }

function showEl(el){
  var el = $(el);
  console.log(el.val());
 }

function renderDropDown(data,target){
  var select = $('<select>');
  data.forEach(x=>{
    var option = $('<option>',{value:x.value});
    option.html(x.text);
    select.append(option);
  });
  target.append(select);
 }