从下拉列表中选择要传递给变量的选项并使用新的 domDocument 重新加载页面

Question

好的。已经为此奋斗了很长时间了。我有以下代码从添加站点获取 html：

$articleClassName = 'relative isolate sf-search-ad cursor-pointer overflow-hidden relative transition-all outline-none p-10 hover:bg-aqua-50 focus:bg-aqua-50 sf-search-ad-legendary  -m-8';
$merchantID = '3553552';
$finn_link = 'https://www.addsite.tv/car/used/search.html?orgId='.$merchantID.'&sort='.$sortBy;
$finnTagName = 'article';
$finnAttrName = 'class';
$finnAttrValue = $articleClassName;

$finnDom = new DOMDocument;
$finnDom->preserveWhiteSpace = false;
@$finnDom->loadHTMLFile($finn_link);

$finnHtml = getTags( $finnDom, $finnTagName, $finnAttrName, $finnAttrValue );
    
function getTags( $finnDom, $finnTagName, $finnAttrName, $finnAttrValue ){
    $finnHtml = '';
    $domxpath = new DOMXPath($finnDom);
    $newDom = new DOMDocument;
    $newDom->formatOutput = true;
    $filtered = $domxpath->query("//$finnTagName" . '[@' . $finnAttrName . "='$finnAttrValue']");
    // $filtered =  $domxpath->query('//div[@class="className"]');
    // '//' when you don't know 'absolute' path

    // since above returns DomNodeList Object
    // I use following routine to convert it to string(html);
    $i = 0;
    while( $myItem = $filtered->item($i++) ){
        $node = $newDom->importNode( $myItem, true );    // import node
        $newDom->appendChild($node);                    // append node
    }
    $finnHtml = $newDom->saveHTML();
    return $finnHtml;
}
?>

我有这个选择下拉菜单：

<select id="search-sorter">
<option value="MILEAGE_DESC">Km h&oslash;y-lav</option>
<option value="MILEAGE_ASC">Km lav-h&oslash;y</option>
<option value="MODEL">Modell</option>
<option value="PRICE_DESC">Pris h&oslash;y-lav</option>
<option value="PRICE_ASC">Pris lav-h&oslash;y</option>
<option selected value="PUBLISHED_DESC">Publisert</option>
<option value="YEAR_ASC">&Aring;r eldst-nyest</option>
<option value="YEAR_DESC">&Aring;r nyest-eldst</option>
</select>

简而言之，我需要将选定的选项值传递给变量 $sortBy 并重新加载页面以按排序顺序更新 domDocument 视图。正如你所看到的，链接是由 URL 中的变量组成的。因此，在理想的工作中，这应该如何工作，将选定的选项值传递给变量 $sortBy，然后页面将使用 $finn_link 提供的已更改的源链接重新加载到 newDOM 中，这样就可以实现排序结果。

我真的需要一个提示：D

最初还有其他选择，但我真的需要这些才能发挥作用。我还会考虑仅重新加载包含受 domDocument 更改影响的实际 html 的部分页面，而不是重新加载整个页面，但重新加载整个页面也可以正常工作。

Answer 1

我使用 javascript 来完成这项工作（我对 javascript 很差，所以只是做了我可以从所有互联网上收集到的内容）：

const selectElement = document.getElementById('search-sorter');
    selectElement.addEventListener('change', function() {
        const selectedValue = selectElement.value;
        const urlParams = new URLSearchParams(window.location.search);
        urlParams.set('sortBy', selectedValue);
        window.location.href = window.location.pathname + '?' + urlParams.toString();
    });

我使用后：

$sortBy = isset($_GET['sortBy']) ? $_GET['sortBy'] : 'PUBLISHED_DESC';